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  quot  lt i class  icon-search  gt  lt  i gt  quot

User · Accepted Answer

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    lt form role  form  gt     lt div class  form-group  gt       lt input type  text  class  form-control empty  id  iconified  placeholder   amp  xF002    gt     lt  div gt   lt  form gt    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

User · Answer

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    lt input style  font-family  Font Awesome 5 Brands   important          type  text  placeholder   amp  xf167  gt    More detail Use Font Awesome  5  icon in input placeholder text

User · Answer

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    lt input type  text  class  fontAwesome  name  emailAddress  placeholder   amp  xf0e0   insert email address      value    gt    You can see in CodePen

User · Answer

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    x000D   x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 8 1 css solid css  gt  x000D   x000D   lt input type  text  placeholder   amp  xF002  Search  style  font-family  Arial   Font Awesome 5 Free     gt  x000D   x000D   x000D    For FA5 Pro the font name is  Font Awesome 5 Pro

User · Answer

If you re using FontAwesome 4 7 this should be enough    x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   lt input type  text  placeholder   amp  xF002  Search  style  font-family Arial  FontAwesome    gt  x000D   x000D   x000D    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

User · Answer

Ignoring the jQuery this can be done using   placeholder of an input element    lt form role  form  gt     lt div class  form-group  gt       lt input type  text  class  form-control name  placeholder   amp  xF002    gt     lt  div gt   lt  form gt    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

User · Answer

Sometimes above all answer not woking  when you can use below trick   x000D   x000D   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    x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 6 3 css all css  gt  x000D   x000D   lt form role  form  gt  x000D     lt div class  form-group  gt  x000D       lt input type  text  class  form-control empty  id  iconified  placeholder  search  gt  x000D       lt i class  fas fa-search  gt  lt  i gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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    To place an icon in the usual manner   HTML  lt i class  fas fa-icon block  icon  gt  lt  i gt   lt input type  text  name  name  class  block  input  placeholder  Some text  gt    CSS  block  icon     position  absolute    margin  some-corrections     block  input     padding  some-corrections       Then adjust placeholder s text  it s personal for everyone  in my case an icon was just before the text    HTML  lt  -- For example add some spaces in placeholder  to make focused cursor stay before an icon -- gt     placeholder      Some text        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        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  lt i class  fas fa-icon block  icon  gt  lt  i gt   lt input type  text  name  name  class  block  input  placeholder      Some text  gt    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

User · Answer

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  amp  xf002 for Font-Awesome s glyph as here  lt input type  text  class  fas  placeholder   amp  xf002    gt   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    x000D   x000D  input   x000D    padding  5px  x000D    x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 6 3 css all css  integrity  sha384-UHRtZLI pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s   crossorigin  anonymous  gt  x000D   lt form role  form  gt  x000D     lt div class  form-group  gt  x000D       lt input type  text  class  fas  placeholder   amp  xf002    gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Use placeholder   amp  xF002   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

User · Answer

I added both text and icon together in a placeholder    placeholder  Edit  amp nbsp   amp  xf040     CSS    font-family  FontAwesome  Merriweather Sans   sans-serif

User · Answer

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    lt form class  form-inline my-2 my-lg-0  gt       lt div class  input-group mb-3  gt           lt div class  input-group-prepend  gt               lt span class  input-group-text  gt  lt i class  fas fa-search  gt  lt  i gt  lt  span gt           lt  div gt           lt input type  text  class  form-control fas text-right  placeholder   amp  xf002   aria-label  Search string  gt           lt div class  input-group-append  gt               lt button class  btn btn-success input-group-text bg-success text-white border-0  gt Search lt  button gt           lt  div gt       lt  div gt   lt  form gt

User · Answer

If you can   want to use Bootstrap the solution would be input-groups     lt div class  input-group  gt    lt div class  input-group-prepend  gt     lt span class  input-group-text  gt  lt i class  fa fa-search  gt  lt  i gt  lt  span gt     lt  div gt    lt input type  text  class  form-control  placeholder  -  gt   lt  div gt    Looks about like this input with text-prepend and search symbol

User · Answer

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    amp  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    lt input id  listFilter  placeholder   amp  xF002   type  text  gt    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

User · Answer

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

User · Answer

I do this by adding fa-placeholder class to input text    lt input type  text  name  search  class  form-control  placeholder   amp  xF002     gt   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

User · Answer

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

[html] Use Font Awesome Icon in Placeholder

Examples related to html

Examples related to font-awesome

Examples related to placeholder