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:

Answer 1

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>

Answer 2

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