3

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?

chuckd
  • 13,460
  • 29
  • 152
  • 331

3 Answers3

2

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.

Matthias Seifert
  • 2,033
  • 3
  • 29
  • 41
  • Just FYI - in the debugger window I see a line through the style property with a info icon that says "Invalid property value". Not sure why, even though it shows the icon! – chuckd May 16 '18 at 08:12
  • @user1186050 Weird, I don't see this (Chrome 66). What browser are you using? Is the complete style attribute striked out? – Matthias Seifert May 16 '18 at 08:15
  • yes and I'm using the latest version of Chrome (66) – chuckd May 16 '18 at 08:18
  • It is strange, but I cannot reproduce this – Matthias Seifert May 16 '18 at 08:42
  • On my computer (and I presume all computers where Arial contains a glyph for F002), this snippet shows fi rather than the FA icon. You're right about the 900 weight though, so it's possible to do what the OP wants by only giving the placeholder the font. See also http://jsfiddle.net/MrLister/mopn054k/1/ – Mr Lister May 16 '18 at 09:00
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/

K K
  • 17,794
  • 4
  • 30
  • 39
  • It looks like this worked, but it changed the font inside the search field. Do you know why it changed. I also used 'font-family:Arial, FontAwesome 5 Free;' – chuckd May 16 '18 at 07:54
  • @user1186050 The font inside changed because class fa uses Font Awesome font family. – K K May 16 '18 at 08:16
  • is there a way to use/set my original font-family? – chuckd May 16 '18 at 08:19
  • You can change the font of the placeholder alone by writing `input::placeholder {font:900 1em 'Font Awesome 5 Free';}` and then you won't need to change the stye of the input itself. See http://jsfiddle.net/MrLister/mopn054k/1/ – Mr Lister May 16 '18 at 08:53
  • I'm getting an error that says ::placeholder is not a valid CSS 3.0 pseudo-element. Additionally, if I run your example and I change the fon-family then the icon disappears – chuckd May 16 '18 at 08:58
  • Where do you get this error? The W3C CSS validator doesn't complain. And what are you changing the font-family to? My example works fine, under various browsers and OSes. – Mr Lister May 16 '18 at 09:09
0

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

chuckd
  • 13,460
  • 29
  • 152
  • 331