FontAwsome and placeholders

April 12, 2016


This is one way to use fontAwesome icons inside a placeholder.

In the CSS you have to use this code for the class fontAwesome:

.fontAwesome {
  font-family: "Helvetica", FontAwesome, sans-serif;

After that in the HTML you have to add the fontawesome class first and then the fontawesome icon code inside the placeholder:

<input class="fontAwesome" name="emailAddress" type="text" placeholder="[insert-fa-code-here;] insert email address ..." />

and it’s done!!!

You can simply apply the class every time inside your input with the relative code in the placeholder.

And even more, you can use this method by entering the code into a generic element such as a link or a simple text using the same class “fontAwesome” used for the placeholder:

<a class="fontAwesome" href="#">[insert-fa-code-here;] Great job!!!</a>

You can see the result or read the post from my codePen post.

Written by huckbit web developer who lives and works in UK building cool things. You can find me on twitter.