Font awesome icon in placeholder not showing up unless font weight set to 600

Question

I upgraded from Font Awesome 4.4 to 5 and I went from using the downloaded files to the CDN.

The fonts work fine, but when using an icon in my search field input placeholder it not showing like I want:

input {
  font-family: Arial, 'Font Awesome 5 Free';
  font-weight: 500;
  color: #777;
  font-size: 18px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

This won't show<br>
<input placeholder=" Location"><br>

This one is showing<br>
<input placeholder=" Location" style="font-weight:600"><br>

The problem I'm having is it only shows up if the font weight of the search field is 600 or more! If I set the font weight to 500 the font icon disappears!

The issue seems to be related to the fact that the regular icon belong to the PRO version and I can only use the solid one (as explained here : Font Awesome shows square instead of icon when used directly in CSS)

Is there any way to use the icon as a placehodler (as I want it to disappear when typing a text) BUT without making the text bold. The icon can be bold, but not the text.

Here is the website where you can also see the result:

the duplicate will give the explanation and you can verify here : https://fontawesome.com/icons/search?style=solid — Temani Afif, May 19 '18 at 20:27
if that's true, is there a way to keep the 'search' icon bold but make the other part of the search field placeholder 'Location' a regular weight? — chuckd, May 19 '18 at 20:27
make it outside the input in this case then play with CSS to make it there, I don't see another way — Temani Afif, May 19 '18 at 20:28
did they change this with the newer versions? I didn't have this issue with version 4.4? — chuckd, May 19 '18 at 20:29
Yes it's new, as in V5 we have PRO ones that you need to pay for ... in the V4 all of them are free. So the PRO ones will not be visible. They need to make money :) — Temani Afif, May 19 '18 at 20:30
thanks! you mentioned using CSS to make it outside the search field, then play with it! Can you give me a better explanation of what you would do to achieve this? — chuckd, May 19 '18 at 20:35
right, I understand that can be acomplished, but I meant a way to include the 'search' icon as part of the placeholder, so that it dissappears when you focus on the search field — chuckd, May 19 '18 at 20:40
actually I don't know if it's possible .. but am gonna edit your question to highlight this particular issue and re-open it, maybe you will get some ideas — Temani Afif, May 19 '18 at 20:51

Temani Afif · Accepted Answer · 2018-07-29T20:05:30.973

An idea is to create the placeholder as element outside the input in order to easily isolate the icon, then you can simulate the placeholder effect by playing with the focus state and some z-index.

input,
label span {
  font-family: Arial;
  font-weight: 500;
  color: #777;
  font-size: 18px;
}

label {
  position: relative;
}

label>span {
  position: absolute;
  top: 0;
  left: 5px;
  cursor: auto;
}

input {
  position: relative;
}

input:focus {
  z-index: 1;
}


/* Or 
input:focus + span {
  display:none;
}

*/

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

<label>
<input  style="font-weight:600">
<span><i class="fas fa-search"></i> Location</span>
</label>

score 1 · Answer 2 · answered May 19 '18 at 21:33

I think mixing the font icon and the standard font that you are using for the input might not be the best way to go. For your use case I would recommend separating out the icon from the rest of the input like this:

<div class="input-wrap">
  <input type="text" placeholder="Location" />
  <i class="fas fa-map-marker-alt"></i>
</div>

I've made an example here that also has some example CSS. To match your current implementation, the icon will also hide on input focus, but this doesn't always need to be the case.

There is also a built in way to do this in Bootstrap which I can see is being used on your example site:

V4: https://getbootstrap.com/docs/4.1/components/input-group/

V3: https://getbootstrap.com/docs/3.3/components/#input-groups

Font awesome icon in placeholder not showing up unless font weight set to 600

2 Answers2