1

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.

2
  • I think this answer will be good for you stackoverflow.com/a/19350349
    – sam2de
    Dec 18 '14 at 21:50
  • Thanks. I saw that in my searches but it does not seem to be working for me. FYI - To call the Font Awesome icons I am using the Bootstrap CDN method.
    – penone
    Dec 18 '14 at 22:00
1

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(&$variables) {
 $icons = array(
  'fa-adn' => '',
  'fa-align-right' => '',
 );
 if (isset($variables['element']['#attributes']['placeholder']) && 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('/^(<input .*placeholder=")(' . $search_string . ')(".*\/>)$/', '$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.

2
  • Thanks for this. Works but I am stil needing one further step. I can now get the icon to appear but if I want to add a text after it the icon will disappear. Anyway to add text after the fa-adn?
    – penone
    Dec 21 '14 at 21:05
  • 1
    Oh ok, that goes against the natural function of the form placeholder. My solution is much more complicated than you need for that. Check this solution it will probably be closer to what you want. You should be able to do it through the GUI and CSS.
    – sareed
    Dec 22 '14 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.