Solved: Font Awesome 5 Not Working On CSS Pseudo Elements?
How to fix Font Awesome 5 Not Working On CSS Pseudo Elements? FontAwesome 5 Not Working wit CSS before and After
How to Fix Font Awesome 5 Not Working On CSS Pseudo Elements?
Font Awesome is one of the most popular webfont used by many websites on the Internet. This Webfont has been used by millions of websites in the world, and has received data up to billions of bytes per month.
Until now, Font Awesome developed by Bootstrap has reached version 5. Where it supports more than 1000 icons that can be inserted in the HTML DOM.
However, it seems that there are some Bloggers and Webmasters who have problems when placing several font icons on their website.
There are some Bloggers who claim that Font Awesome 5 doesn't work if using CSS Pseudo Element, like CSS
:after and :before. Some certain icons do not appear, and only bring up an empty box icon.
But, it turns out that this is not a bug from Font Awesome, but the inaction that the Webmaster does when writing CSS attributes :after or :before
Cause Icon Font Awesome 5 be Empty Box
The cause of the appearance of an empty box on Font Awesome 5 icon is not a bug, but rather an inaccuracy done by Blogger / Webmaster.
Number 1, the problem came out if you using Font Awesome script with All element. I mean, if you using this script in <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" /> , that problem will be faced. But if you're using 3 different script per icon type, that error will not be faced.
Number 2, According to Developer, using Font Awesome with CSS Pseudo Element must use
font-weight attribute, and is required.
Each type of symbol must be filled with different
font-weight attributes. I will explain below:font-weight has to be:400for Regular and Brands symbols900for Solid symbols300for Light symbols
For more details, I will give an example of its application:
.icon:before {
content: '\f5ca';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
Icon
f5ca in Font Awesome is icon type Solid, that must use attributes font-weight:900.icon:before {
content: '\f0eb';
font-family: "Font Awesome 5 Free";
font-weight: 400;
}
Icon
f0eb in Font Awesome is icon type Regular, that must use attributes font-weight:400Thank for read, if you have any question, fill the Comment box below