Clash Royale CLAN TAG#URR8PPP

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

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:

yes, if the Regular version of this icon is not free
– Temani Afif
May 19 at 20:24

the duplicate will give the explanation and you can verify here : fontawesome.com/icons/search?style=solid
– Temani Afif
May 19 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?
– user1186050
May 19 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 at 20:28

did they change this with the newer versions? I didn't have this issue with version 4.4?
– user1186050
May 19 at 20:29

2 Answers
2

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.

focus

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>

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.