What does fa,fab,fad,fal,far and fas mean in Font Awesome?
Are you a Font Awesome user who has been seeing and using fa, fab, fad, fal, far, and fas but can't quite clearly tell their differences apart in terms of what each means, where and what it is used for, and how they differ from each other?
Well, if you are one, then this article is for you. In it, we will cover everything you need to know about each of the above Font Awesome classes.
But before then, allow me to do a quick introduction on Font Awesome in case someone here is new to it.
Font Awesome is an icon library for adding icons to websites and desktop applications.
It happens to be the most popular solution for adding icons to websites among designers and developers all over the world.
As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing it in the second position after Google Fonts.
It comprises a large pool of icons with version 6 having a total of 28,127 icons (where 2,020 icons are free to use and the rest are premium).
It is easy to install and use. Here is an article I wrote about how to install Font Awesome on your website.
Once you have done the Font Awesome installation on your website, you are required to use inline HTML elements which include either <i> or <span> tags.
Within the class attribute of these tags is where you add the Font Awesome stuff and the magic happens.
Example
<i class="fas fa-user"></i>
<span class="far fa-user"></span>
From the above example above, one thing that you notice is that we have two classes for each of the <i> or <span> tags.
The first class can be fa, fab, fad, fal, far, or fas.
The second class starts with a fa followed by a hyphen (-) and then the icon name, ie. fa-iconname. The fa stands for the Font Awesome initials. For instance, an icon for a user will have the name "fa-user", home "fa-home", envelope "fa-envelope", etc.
While it is possible to think of an icon name and it coincidentally exists in Font Awesome, that is not always the case. To get the real existing names of the icons, use the links below to view icon libraries for different Font Awesome versions.
- Font Awesome v6 icons library
- Font Awesome v5 icons library
- Font Awesome v4 icons library
- Font Awesome v3 icons library
The Font Awesome fa, fab, fad, fal, far, and fas classes
Now that you have understood the second class of Font Awesome icons, let's now dive into the first classes, and what happens to be the objective of this article.
The fa class
For all the Font Awesome versions before version 5, fa was the only class used as the first class for all the icons. It's a short form of Font Awesome.
It was used for all icon styles and the differentiation between various styles was defined within the second class (icon name).
Example
<i class="fa fa-envelope"></i> <!-- Solid style envelope icon -->
<i class="fa fa-envelope-o"></i> <!-- Regular style envelope icon -->
<i class="fa fa-google"></i> <!-- Google icon which falls under the brands category-->
As you can see from the above example, we have 3 icons each of which belongs to a different icon style as you will come to see later though they all have the first class as fa.
The fa class was deprecated in Font Awesome version 5.
Note: Always use fa class for all icons with installations before Font Awesome version 5 (eg. v3, v4, etc). If you are using version 5 or later, then using fa class will not work for you.
The fas class
The s in the fas class stands for solid. All the Font Awesome icons that have fas as their first class have a solid style. As the name suggests, solid icons are bold with the assigned color taking the most part of the icon design as opposed to their counterpart(hollow/outline) icons. Solid icons are the most visible, shouting, and recognizable as compared to the other styles.
Use the links below to access a library of all the solid icons for:
Example
<i class="fas fa-envelope"></i>
<i class="fas fa-user"></i>
<i class="fas fa-book-open"></i>
<i class="fas fa-box"></i>
<i class="fas fa-calendar"></i>
The fab class
The b in the fab class stands for brand. As the name suggests, the fab class is used to add/show icons for brands. Brands icons are in most cases the logos of companies. They can also be used to represent products or services.
In this category you can find the icons for most of the globally recognized brands eg. Facebook, Google, Amazon, Twitter, Apple, etc.
Use the links below to access a library of all the brand icons for:
Example
<i class="fab fa-tiktok"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-amazon"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-google"></i>
The fad class
The d in the fad class stands for duotone. The duotone icons consist of a primary and secondary layer, which are shades of the same color.
By default, the secondary layer is given a 40% opacity of the icon's set (primary) color so that it appears as its lighter shade.
Duotone icons can add some extra visual interest to your designs without overpowering them. However, at very small sizes, they can be hard to decipher.
Use the links below to access a library of all the duotone icons for:
Example
<i class="fad fa-acorn"></i>
<i class="fad fa-atlas"></i>
<i class="fad fa-balance-scale"></i>
<i class="fad fa-check-circle"></i>
Note: All Font Awesome duotone icons are premium/Pro. To use duotone icons, you'll need a subscription to a Pro-level plan or a perpetual Pro license.
The far class
The r in the far class stands for regular. The regular icons are outlined in design and created by vector strokes. They are empty/hollow inside. They are generally the opposite of the solid icons, with the hollow/empty space taking most of the icon space. The outline for these icons is of average thickness/width: not too thick and not too thin.
The pros, of these types of icons is that they’re clean, minimalist, and can look very polished. On the other hand, they can be harder to process and recognize as compared to their solid counterparts.
Use the links below to access a library of all the regular icons for:
Example
<i class="far fa-bell"></i>
<i class="far fa-calendar"></i>
<i class="far fa-check-circle"></i>
<i class="far fa-address-card"></i>
The fal class
The l in the fal class stands for light. The light icons are very common to the regular icons but as their name suggests, they are lighter.
They are more hollow than the regular icons and their outlines are thinner than those of regular icons.
Use the links below to access a library of all the light icons for:
Example
<i class="fal fa-anchor"></i>
<i class="fal fa-book"></i>
<i class="fal fa-chevron-circle-up"></i>
<i class="fal fa-alarm-clock"></i>
Note:
All Font Awesome light icons are premium. To use them, you'll need a subscription to a Pro-level plan or a perpetual Pro license.
You can only use the fab, fad, fal, far, and fas classes if you are using Font Awesome version 5.
If you use Font Awesome version 4 or lower, please use the fa class.
If you have installed version 6, please refer below.
Font Awesome version 6 updates
Font Awesome version 6 changed the above classes. The first classes for use in the <i> and <span> icon tags were changed from what we have covered above to fa-style where style is the full actual name of the style eg. regular, duotone, solid, etc.
The table below matches the version 5 classes to those of version 6 with the aid of examples.
| Version 5 | Version 6 | Example |
|---|---|---|
| fab | fa-brands | <i class="fa-brands fa-bootstrap"></i> |
| fad | fa-duotone | <i class="fa-duotone fa-user"></i> |
| fal | fa-light | <i class="fa-light fa-user"></i> |
| far | fa-regular | <i class="fa-regular fa-user"></i> |
| fas | fa-solid | <i class="fa-solid fa-user"></i> |
| fa-thin | <i class="fa-thin fa-user"></i> |
The fa-thin class
As you can see from the table above, a new class namely fa-thin was introduced in Font Awesome version 6.
As their name suggests, fa-thin icons are very thin. They look much alike to light icons only that they are way thinner. Like the light icons, these too are all premium.
Use the link below to access a library of all the light icons for:
Example
<i class="fa-thin fa-address-card"></i>
<i class="fa-thin fa-chalkboard-user"></i>
<i class="fa-thin fa-circle-user"></i>
That's all for this article!
