Example Īs 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. It was used for all icon styles and the differentiation between various styles was defined within the second class (icon name). The fa classįor all the Font Awesome versions before version 5, fa was the only class used as the first class for all the icons. Now that you have understood about the second class of Font Awesome icons, lets now dive into the first classes, what happens to be the objective for this article. Font Awesome v3 icons library The Font Awesome fa, fab, fad, fal, far and fas classes.To get the real existing names of the icons, use the links below to view icons libraries for different Font Awesome versions. While it is possible to think of an icon name and it coincidentally exists in Font Awesome, that is not always the case. For instance, an icon for a user will have the name "fa-user", home "fa-home", envelope "fa-envelope", etc. The fa stands for the Font Awesome initials. The second class starts with a fa followed by a hyphen ( -) and then the icon name, ie. The first class can be fa, fab, fad, fal, far or fas. Example įrom the above example above, one thing that you notice is that we have two classes for each of the or tags. Within the class attribute of these tags is where you add the Font Awesome stuff and the magic happens.
Once you have done the Font Awesome installation on your website, you are required to use inline HTML elements which include either or tags. Here is an article I wrote about how to install Font Awesome into your website. It comprises a large pool of icons with version 5 having a total of 7,864 icons (where 1,608 icons are free to use and the rest are premium) and version 6 (latest and in beta stage at the time of writing) having 14,554 icons (where 1,704 are free and the rest are premium). It happens to be the most popular solution for adding icons into websites among designers and developers all over the world.Īs 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. In it, we will cover everything you need to know about each of the above Font Awesome classes.īut before then, allow me to do a quick introduction on Font Awesome in case someone here is new to it.įont Awesome is an icon kit/library for adding icons to websites and desktop applications.
Well, if you are one, then this article is for you.
0 kommentar(er)
