set fontawesome icon to a placeholder

Question

I tried differents solutions found here but nothing works. What I need is to set the fontawesome f14a to a field what's wrong ?

document.getElementById('property_charges').setAttribute('class', 'fontawesome-placeholder');
document.getElementById('property_charges').placeholder = '&#f14a';

and the css:

.fontawesome-placeholder {
  //padding:10px;
  //font-family: FontAwesome;
  //z-index: 9999;
  //z-index: 1;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
}

the suggested solution on the "duplicate" doesn't work + I don't want Jquery on my project

Possible duplicate of [Use Font Awesome Icon in Placeholder](https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder) — aaaaane, Apr 18 '19 at 13:30
_“the suggested solution doesn't work”_ - which one? You got one possible duplicate referred to by now, and two answers already … and now we are supposed to know what you mean by that? Please be a little more specific. If the answers don’t work as you want, then comment under them directly. — 04FS, Apr 18 '19 at 13:50

Tyler Roper · Answer 1 · 2019-04-18T14:04:25.213

Assuming your goal is to use Font Awesome for a placeholder and revert the font when the user enters a value, you don't need JavaScript for that. This can be done solely with CSS by using ::placeholder.

(Note that you're missing an "x": &#f14a --> )

#property_charges::placeholder {
  font-family: "Font Awesome 5 Free";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<input id="property_charges" placeholder="&#xf14a;">

^{(In my example, my font name has to be "Font Awesome 5 Free" because I'm using Font Awesome 5. If you're using an older version, your font will likely remain FontAwesome.)}

score 2 · Accepted Answer · answered Apr 18 '19 at 13:47

2

When using JS/jQ and unicode, a u must be added after the forward slash. Do not use the HTML entity unless you intend to place it directly into HTML. There are some required CSS styles as well.

document.getElementById('fa').setAttribute('placeholder', '\uf14a');

.icon {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

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

<input id='fa' class='icon'>

answered Apr 18 '19 at 13:47

zer00ne

41,936
6
41
68

nice thank you ! by any chance, are you using symfony/webpack-encore ? cause it's breaking the "default style" – Tom Paler Apr 18 '19 at 13:53
1

You're welcome, no not using anything but what's in the demo. Try removing the styles in `.icon` class with the exception of `font-family: "Font Awesome 5 Free"` Also this is FA5 make sure that you are using the correct version. If you are using FA4 this will still work by changing `font-family` to `FontAwesome`. – zer00ne Apr 18 '19 at 13:57
for information: when I was using setAttribute('class', 'blabla'), I was deleting the default class used in Symfony fields, use .classList.add('new-class') instead – Tom Paler Apr 18 '19 at 14:11

score 0 · Answer 3 · answered Apr 18 '19 at 14:12

document.getElementById('fa').setAttribute('placeholder', '\uf14a');

.icon {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

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

<input id='fa' class='icon'>

set fontawesome icon to a placeholder

3 Answers3