Resolved: Font Awesome icon not appearing

General Dec 27, 2020

Normally we use a font awesome icon by using an element with class as follows:

<i class="fa fa-bell"></i>

and we see a bell icon
Now if we want Twitter icon then as per the ritual we will write

<i class="fa fa-twitter"></i>

But there is no icon here
So, what went wrong?
Actually icons like Twitter fall under the brands category in Font Awesome and we need a different class i.e. “fab” to use it.
Changing

<i class="fa fa-twitter"></i>

to

<i class="fab fa-twitter"></i>

You will get the Twitter icon
This rule applies to all icons that fall under Font Awesome Brands category.

There is another category of solid icons in Font Awesome and if you want to use them then you have to use “fas” class like below:

<i class="fas fa-chess-king"></i>

and you get a solid chess king icon

Tags