Font Awesome is arguably the best source for using icons. It is very popular comparing to other free font providing services. Why is that? Because it is free and very easy to use and customize. Font awesome was first released in 2012 (source: Wikipedia) and has became very popular in the recent years, especially in version 4. Font awesome 5 has been upgraded from version 4 in last December of 2017. There have been some major changes. Before Font Awesome 5, font awesome 4 syntax was like this:
<i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fas fa-cogs"></i> <i class="fas fa-wrench"></i>
Upgrading from Font Awesome 4
In this syntax, all the icon names start with an ‘fa’, which is obviously the shortcut for font awesome and the next thing is ‘facebook’ for the actual icon name. But in font awesome 5, the icons have been categorized. How? They introduced some new prefixes for using the icons. Basically, there are 4 to be exact. They are:
- Font Awesome Brands. [fab] (brands like facebook, twitter, youtube and so on)
- Font Awesome Solid of Font Awesome. [fas or fa] (solid icons like settings, star and etc)
- Font Awesome Regular.
- Font Awesome Light.
The last two categories, Font awesome regular and font awesome light are available for paid version only.
Using font awesome 5
Using font awesome 5 is as easy as it gets. You can use it by calling in from CDN or using it by downloading into your system first and then using it. I find the second one handy because even if your internet is slow or down, you can use without any problem at all. So, if you download font awesome 5, you will see folder containing so many files. Here’s a reminder, you can use just the brands icons or just the solid icons or you can also use the master css file to use them all. This is just a css file so you can use all versions at once or you can call the ones you require. So, it’s your choice.
The separate versions will come in handy if you use font awesome just for social icons in your website. As of now, font awesome version is …….. and you will need to go to ‘web-fonts-with-css’ folder and in the ‘css’ sub folder, you will see a file named ‘fontawesome-all.min.css’. Copy the file to your website directory. Also copy the ‘webfonts’ folder. Whatever folder you copy the css file, the webfonts folder must be one step back of that directory. If you copy the font awesome css file to your /css directory, make sure you have webfonts folder on the root directory.
Then call the css file from the head section of your website.
Font Awesome 5 Output
Try out these following codes and see if the execute.
<i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fas fa-cogs"></i> <i class="fas fa-wrench"></i>
If you have done everything right, you will see font awesome working like this:
So, that was the detailed usage of font awesome 5. I hope it was easy. If you want to use font awesome 5 as background pseudo element, you can do that. This post is already long enough so I think I will write another post maybe with another video in the near future. Stay tuned with my facebook page for further updates. If you haven’t been able to do this right, watch this whole process in the following 06.25 minute video you’ll certainly be able to do it.
https://youtu.be/NqmWhW08JY0
I hope the process was easy and you understood. If you have, make sure to share the post and also subscribe to the youtube channel while watching.
