Take control of how people reach you. Sign up for our free beta today.

Sponsored by https://goswitchboard.com.

Trying to use Font Awesome icons as placeholder text in an input field for the most part does not work by default.

Let’s assume you have an input field that looks something like:

<input type="text" class="form-control" placeholder="&#xf02c; Filter by tags">

This ends up looking something like:

Which is really not what we expect. Here’s how to make this work!

Add FontAwesome to the font-family for the specified CSS class (form-control in this example).

.form-control {
  font-family: "FontAwesome"
}

Keep in mind that you probably want to append FontAwesome to the font-family, instead of overriding it completely. If you use sass, something along the lines of this works beautifully.

.form-control {
  font-family: append($font-family-sans-serif, "FontAwesome", "comma")
}

Now this is much better looking input box!

Ember JS

In Ember, the above example used as-is in a template will generally do the right thing.

The caveat here is that this will not work correctly inside an Ember component. For example, the following will not do what you expect:

{{
  text-input
  placeholder=" Filter by tags"
}}

The reason being because Ember html-escapes the unicode text which results in " Filter by tags" as the placeholder text instead.

To work around this, set a variable in the controller (users in this example) and use that variable as input when instantiating the Ember component.

For example, in app/controllers/users.js

import Ember from 'ember';

export default Ember.Controller.extend({
  // ...
  fontAwesomePlaceHolder: "\uf02c Filter by tags",
  // ...
});

Use this variable as follows:

{{
  text-input
  placeholder=fontAwesomePlaceHolder
}}

That’s all there is to it, enjoy!