Use Font Awesome Icon in Placeholder

Question

Is it possible to use Font Awesome Icon in a Placeholder? I read where HTML isn't allowed in a placeholder. Is there a workaround?

placeholder="<i class='icon-search'></i>"

Answer 1

If you can / want to use Bootstrap the solution would be input-groups:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Looks about like this:input with text-prepend and search symbol

Answer 2

If you're using FontAwesome 4.7 this should be enough:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).

Answer 3

@Elli's answer can work in FontAwesome 5, but it requires using the correct font name and using the specific CSS for the version you want. For example when using FA5 Free, I could not get it to work if I included the all.css, but it worked fine if I included the solid.css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

For FA5 Pro the font name is 'Font Awesome 5 Pro'

Answer 4

I do this by adding fa-placeholder class to input text:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

so, in css just add this:

.fa-placholder { font-family: "FontAwesome"; }

It works well for me.

Update:

To change font while user type in your text input, just add your font after font awesome

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Answer 5

I know this question it is very old. But I didn't see any simple answer like I used to use.

You just need to add the fas class to the input and put a valid hex in this case &#xf002 for Font-Awesome's glyph as here <input type="text" class="fas" placeholder="&#xf002" />

You can find the unicode of each glyph in the official web here.

This is a simple example you don't need css or javascript.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Answer 6

Where supported, you can use the ::input-placeholder pseudoselector combined with ::before.

See an example at:

http://codepen.io/JonFabritius/pen/nHeJg

I was just working on this and came across this article, from which I modified this stuff:

http://davidwalsh.name/html5-placeholder-css