Unicode characters for font awesome 'search' not showing up after upgrading Font Awesome

Question

I was using font awesomes 'search' font

<i class="fas fa-search"></i>

unicode characters

f002

in my search field placeholder like this

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight" style="font-family:Arial, FontAwesome" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

and it was working fine until I upgraded to Font Awesome 5.0.13 from the older 4.4

Looking at the Font Awesome site the unicode characters are still the same.

So I'm wondering if there is some file I missed when downloading the fonts or am I not implementing it correctly?

Answer 1

I think this is a very interesting question, and I'm sure this is not a 100% perfect solution, but I found this Github Issue, where they say, that you also need to set font-weight: 900 for solid Font Awesome Icons. Also the font-family changed a bit, as mentioned in the comments. Please take a look at the snippet below, I am not sure if you can "unbold" the text after the icon.

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

<input id="navbarSearchField" 
       type="text" 
       class="form-control searchInputsHeight" 
       style="font-family: Arial, Font Awesome\ 5 Free; font-weight: 900;" 
       placeholder="&#xf002 Location" 
       aria-describedby="navbarDate" 
/>

It seems like you would'nt need to set a specific font-weight with the "Regular" Icon Pack of FA, but unfortunaly this is part of FA Pro, which you would have to purchase.

Answer 2

<input id="navbarSearchField" class="fas" type="text" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Just add class fa or fas to the input:

<input id="navbarSearchField" class="fa" type="text" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

Demo: http://jsfiddle.net/GCu2D/3601/

Answer 3

I got it to work. Here is what I did.

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight" style="font-family:Arial, 'Font Awesome 5 Free'; font-weight: 600; color: #777; font-size: 20px;" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

Notice the single quotes around the font-family 'Font Awesome 5 Free'. If I did't use the single quotes it worked with a class 'fa' used but used the Font Awesome font family, now it uses my font. 'Circular' without the fa class being used. Additionally I had to add font-weight: 600 or it wouldn't show up! The font-weight is explained in the FA documents online