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:
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>