Add Font-awesome icon into input by CSS

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.

There is a very easy and awesome way to add font-awesome icons into input as place holder.
I’m going to share now how to add font-awesome icons inside input. Before seeing the post, make sure that you properly integrated the font-awesome in your project.

After integrating font-awesome in your project now make the form as usual in your html file.

<blockquote><div class="form-group">
<input type="#" placeholder="Search">
</div></blockquote>

This is the html code.

Now add the code below in your CSS file,

<blockquote>.form-group ::-webkit-input-placeholder::before { font-family: fontAwesome; content:'\f002  '; color: #69f }
.form-group ::-moz-placeholder::before { font-family: fontAwesome; content:'\f002  '; color: #69f } /* firefox 19+ */
.form-group :-ms-input-placeholder::before { font-family: fontAwesome; content:'\f002  '; color: #69f } /* ie */
.form-group input:-o-placeholder::before { font-family: fontAwesome; content:'\f002  '; color: #69f } /*opera*/</blockquote>

The font-awesome placeholder will work properly by this code. You can add custom style of the placeholder here.

Enjoy Coding