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.

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

This is the html code.

Now add the code below in your CSS file,

.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*/

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

Enjoy Coding


  • Stevie

    May 8, 2018

    What a data of un-ambiguity and preserveness of valuable knowledge about unexpected

  • Johnie

    May 12, 2018

    Greetings! This is my 1st comment here so I just wanted to give a quick shout out and say I
    really enjoy reading your blog posts. Can you suggest any other blogs/websites/forums that go over the
    same subjects? Thank you so much!


Leave a Reply