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!

  • Florian

    February 5, 2019

    If you want to grow your knowledge just keep visiting this website and be updated
    with the latest news posted here.


    February 18, 2019

    Great blog here! Also your website loads up very fast!
    What host are you using? Can I get your affiliate link
    to your host? I wish my website loaded up as quickly as yours lol

  • Luise

    February 23, 2019

    Hello! I’ve been following your website for some time now and finally got the bravery to go ahead and give you a shout out from Dallas Texas!
    Just wanted to mention keep up the good work!


Leave a Reply