Font Awesome 5 on pseudo elements shows square instead of icon
Solution 1
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
You need to add
font-weight:900
.myClass {
font-size:45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
The regular
version of the icon, defined by the default font-weight
, is PRO so it will show an empty square. What you need is the solid
version:
https://fontawesome.com/icons/film?style=solid
Why the other icon is working?
Because the \f007
is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular
one is not PRO and is included in the free package so you don't need to specify a font-weight
. You only need to specify it when you want to show the solid
version.
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>
As a side note, all the light
and duotone
versions are included in the Pro package so will always show empty square whataver the font-weight
used
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Related questions
Font Awesome 5 shows empty square when using the JS+SVG version
Font Awesome 5, why is css content not showing?
Solution 2
from your comment :
Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?
test text-stroke
with a transparent color to get a thinner render :
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
-webkit-text-stroke;
transparent 0.2em;
}
.myClass+.myClass::after {
-webkit-text-stroke: white 0.02em;
}
.bis {
font-size: 4rem;
color: blue
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
<span class='myClass'></span>
<span class='myClass bis '></span>
<u>
<span class='myClass bis '></span></u>
Comments
-
nsayer over 2 years
I am trying to change the content of a
span
with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.1) I have imported FA from the documentation and in the
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) My html looks like this :
<span class='myClass'>Movies</span>
3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
My css currently looks like this but it isn't working, it gives me a square instead of the icon.
.myClass { font-size:25px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: '\f008'; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"> <span class='myClass'></span>
Funny thing is that it looks like it is working with some icons. If I test with
content: '\f007';
it works. Any idea why?(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)