[html] Use Font Awesome Icon in Placeholder

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

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

Use placeholder="" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ . But you have to make sure add style="font-family: FontAwesome;" in your input.

I've solved the problem a bit differently and it works with any FA icon through html code. Instead of all these difficulties with placeholder my solution is:

1. To place an icon in the usual manner

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Then adjust placeholder's text (it's personal for everyone, in my case an icon was just before the text)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Here is the problem that an icon is above the our input and blocks cursor to click so we should add one more line in our CSS

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. But an icon doesn't disappear together with placeholder so we need to fix it. And also this is the final version of my solution:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

It's harder than I thought before, but I hope I've helped anyone with this.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

Anyone wondering about a Font Awesome 5 implementation:

Do not specify a general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here I am using the branch "Brands" for example.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

More detail Use Font Awesome (5) icon in input placeholder text

@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">_x000D_
_x000D_
<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'

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 {_x000D_
  padding: 5px;_x000D_
}

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

I am using Ember (version 1.7.1) and I needed to both bind the value of the input and have a placeholder that was a FontAwesome icon. The only way to bind the value in Ember (that I know of) is to use the built in helper. But that causes the placeholder to be escaped, "&#xF002" just shows up just like that, text.

If you are using Ember or not, you need to set the CSS of the input's placeholder to have a font-family of FontAwesome. This is SCSS (using Bourbon for the placeholder styling):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

If you are just using handlebars, as has been mentioned before you can just set the html entity as the placeholder:

<input id="listFilter" placeholder="&#xF002;" type="text">

If you are using Ember bind the placeholder to a controller property that has the unicode value.

in the template:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

on the controller:

listFilter: null,
listFilterPlaceholder: "\uf002"

And the value binding works fine!

I added both text and icon together in a placeholder.

placeholder="Edit   "

CSS :

font-family: FontAwesome,'Merriweather Sans', sans-serif;

I solved with this method:

In the CSS I used this code for the fontAwesome class:

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

In the HTML I have added the fontawesome class and the fontawesome icon code inside the placeholder:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

You can see in CodePen.

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"/>_x000D_
_x000D_
<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).

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

Teocci solution is as simple as it can be, thus, no need to add any CSS, just add class="fas" for Font Awesome 5, since it adds proper CSS font declaration to the element.

Here's an example for search box within Bootstrap navbar, with search icon added to the both input-group and placeholder (for the sake of demontration, of course, no one would use both at the same time). Image: https://i.imgur.com/v4kQJ77.png "> Code:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Ignoring the jQuery this can be done using ::placeholder of an input element.

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

The css part

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

THE BEST PART: You can have different font family for placeholder and text

There is some slight delay and jank as the font changes in the answer provided by Jason. Using the "change" event instead of "keyup" resolves this issue.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

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"; }

Sometimes above all answer not woking, when you can use below trick

.form-group {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
input {_x000D_
  padding-left: 1rem;_x000D_
}_x000D_
_x000D_
i {_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 50%;_x000D_
  transform: translateY(-50%);_x000D_
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">_x000D_
_x000D_
<form role="form">_x000D_
  <div class="form-group">_x000D_
    <input type="text" class="form-control empty" id="iconified" placeholder="search">_x000D_
    <i class="fas fa-search"></i>_x000D_
  </div>_x000D_
</form>

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