Use Font Awesome Icon in Placeholder

Question

Is it possible to use Font Awesome Icon in a Placeholder? I read where HTML isn't allowed in a placeholder. Is there a workaround?

placeholder="<i class='icon-search'></i>"

Answer 1

Use placeholder="" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ . But you have to make sure add style="font-family: FontAwesome;" in your input.

Answer 2

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

With this CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

And this (simple) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

The transition between fonts will not be smooth, however.

Answer 3

Ignoring the jQuery this can be done using ::placeholder of an input element.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

The css part

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

THE BEST PART: You can have different font family for placeholder and text

Answer 4

I solved with this method:

In the CSS I used this code for the fontAwesome class:

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

In the HTML I have added the fontawesome class and the fontawesome icon code inside the placeholder:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

You can see in CodePen.