Great News! Try our new tool to convert img to amp-img. Try Now!

Friday, January 25, 2019

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="" /> , 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:
  • 400 for Regular and Brands symbols
  • 900 for Solid symbols
  • 300 for 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:400

Thank for read, if you have any question, fill the Comment box below