Add Font Awesome to Webform Placeholder I am currently using Webform 7.x-4.2 and am looking to add a Font Awesome icon inside the placeholder. I did try modifying the settings.php with the following line:

$conf['webform_allowed_tags'] = array('a', 'em', 'strong', 'code', 'img', 'i');


My understanding was that this would allow me to use an 'i' tag on my webforms but it is not working for a placeholder. It does work if I use the tag in place of my label but then when a user gets a confirmation email with a submission summary the label shows the 'i' tag (ex. )

Is there a way to use Font Awesome in a placeholder?

Thanks for any assistance.
After reading question again I was way off. I am not sure if there is an easy cut and dry way to do this but I did find a workaround with hook_preprocess_webform_element. The code is pretty rough but should point the way to suit your needs.

Example:

function MY_MODULE_preprocess_webform_element(&amp;$variables) {
 $icons = array(
  'fa-adn' =&gt; '&amp;#xf170;',
  'fa-align-right' =&gt; '&amp;#xf209;',
 );
 if (isset($variables['element']['#attributes']['placeholder']) &amp;&amp; array_search($variables['element']['#attributes']['placeholder'], array_keys($icons)) !== FALSE) {
  $icon = $variables['element']['#attributes']['placeholder'];
  $search_string = implode('|', array_keys($icons));
  $variables['element']['#children'] = preg_replace('/^(&lt;input .*placeholder=")(' . $search_string . ')(".*\/&gt;)$/', '$1' . $icons[$icon] . '$3', $variables['element']['#children']);
 }
}


This will allow the editor to put the fa icon name in the placeholder text field on the edit form.

You can find the codes for the fa icons here.

EDIT: I forgot to add that you would have to change the font-family for the element and then remove it when the placeholder disappears if you are not using FA for your sites font.

Edit2: Per comment you can add a wrapper class to the textfield when editing the component then use CSS to have an icon permanently in front of the textfield.    

.textfield-wrapper::before {
  position: relative;
  font-family: FontAwesome;
  margin-left: 5px;
  content: '\f061';
 }


Note: If you want the icon 'inside' the text field you can add the appropriate top, left positioning and z-index to this CSS.