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="">
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.
