How to add FontAwesome icons as placeholder text in an input field

Sometimes to make the gorgeous looking of form, we want to add font-awesome icons as placeholder. Most of us do not know how to add the font-awesome icons inside input. Trying to use Font Awesome icons as placeholder text in an input field for the most part does not work by default.  There is a very easy and awesome way to add font-awesome icons into input as place holder.

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

The only way to add the search icon on this placeholder is to use the hex code of icons. A list of these can be found in the Font Awesome cheatsheet. Your input should look like this:

<input type="text" class="form-control" placeholder="&#xF002;">

After you add the hex code to placeholder you need to add FontAwesome to the font-family for the specified CSS class (form-control in this example).

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

Now your input will look like the example above.