Use Font Awesome Icon in Placeholder

Question

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

Fourflusher

Answer 1

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

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

With this CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

And this (simple) jQuery

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

The transition between fonts will not be smooth, however.

Dunaway

FontAwesome will show regular characters for all non unicode symbols. For me inserting a unicode entity does not work, but pasting in the symbol works: placeholder=" Hello" – Diba

With FontAwesome 5 use font-family: Font Awesome\ 5 Free; instead. – Malaya

@AndrewSchultz, font-family: Font Awesome\ 5 Free; doesn't work. I had to use just font-family: FontAwesome; – Richly

Actually you can apply different fonts to the input. I did this on a install with FA5 Pro on it & applied font-family: 'Font Awesome 5 Pro', 'Montserrat'; to the search field & it worked a charm. – Pissarro

@JeffW it works with FA5 but not with FA6. – Chiu

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).

Almondeyed

This worked the best for me as you can mix icons with regular text like this: placeholder=" Search...". – Crumple

Clean and clever! But I had to switch the order of the font families in the inline css. – Epicarp

where did you get  value? I mean how you go from icon-search to &#xF002? – Haematite

I had to put :placeholder => "".html_safe in my Rails app – Dodiedodo

You don't even need the id="iconified" just add class="fa" and font awesome will take care of the css for you. – Pallet

I had to change the font order to make it work: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. Otherwise a symbol containing "fl" was shown. – Heisser

@ІгарЦімошка The hex codes are all shown on the cheatsheet fortawesome.github.io/Font-Awesome/cheatsheet – Nympholepsy

It doesn't seem to work in React because it escapes HTML characters? – Barbera

You sir or ma'am are flippin awesome! I spent quite a while trying to figure this out. I have no idea why this isn't the accepted answer. Upvote!! – Kathikathiawar

If you have issued with JS escaping the & then you can also use \uf002 in JS and the HMTL entity in the HTML markup. – Ebon

I've got this working in Font Awesome 5 – Arvillaarvin

This helped but my text placeholder also changes to different font. – Palmore

Thanks! This trick may also work for other icon fonts. I'm using it with "boxicons". – Cabana

Answer 3

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.

Ding

This does also work for FA5 Pro using input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; } – Basrelief

Answer 4

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

Arvillaarvin

Answer 5

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

Yashmak

This doesn't quite work in Firefox 27 can you please revisit I couldn't figure it out. – Parasang

Answer 6

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.

Jaffa

Answer 7

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!

Spagyric

This is using Ember 1.7.1 – Spagyric

Nice post for those who are using other web technologies. – Fourflusher

Many thanks! scratching my head for quite a bit. thanks for detailing the solution! – Outpatient

Answer 8

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>

Classic

This is the answer for Font Awesome 5. Thanks! – Octachord

Answer 9

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

Morentz

Answer 10

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

Archiearchiepiscopacy

Answer 11

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

Hoggard

Answer 12

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

Tendentious

Answer 13

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

Irrational

Really like your answer since it's a JS-free solution. Will add my 2 cents here. First of all, be warned about the support here (the pseudo selector is quite new, and won't be supported in any older IE-like browsers). Secondly, changing z-index frequently might impact performance (and you cannot animate it). Thus, I suggest changing opacity instead. See here: codepen.io/matis28/pen/dyOpgob – Cullender

Answer 14

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');
    }
});

Tergiversate

Answer 15

I added both text and icon together in a placeholder.

placeholder="Edit   "

CSS :

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

Munificent

Answer 16

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>

Assistant

Answer 17

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

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

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

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>

Unconventional

Question specifically asked for an icon inside a placeholder, not showing it there always. – Cullender

Answer 18

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

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

Prebo