How to check Font Awesome version on your website
Since its initial release to this day, Font Awesome has gone through a series of updates and multiple version releases.
Currently, at the time of writing this article, the latest stable release is v5.15.4 while the newest version v6.0.0 is still in the beta testing stage.
The purpose of these updates has been to improve the library and make it even much better.
Just to list a few, here are some of what these updates entail:
- Addition of new and revising of existing icon categories
- Icon name changes according to new collection-wide naming conventions and standards
- Addition of new icons
- Introduction of new icon styles (eg. solid, duotone, regular, etc)
- Revamping of the icons design to new looks
- General fixes and improvements to many icons
- Addition of support for various frameworks eg. vue.js, react, etc
- Removal of unused SCSS/Less pre-processor variables and utilities
- Etc
Why knowing Font Awesome version on your website is important
Of course from the above updates list, you will notice that each new version release introduces significant changes which may determine whether icons will or will not show on your website.
It is therefore important to know which Font Awesome version your website is using to avoid experiencing version-related conflicts.
For instance, let's look at the case scenarios below where not being version aware can cause problems and icons not to work.
- Using an old Font Awesome version but trying to show icons that were added later in newer versions.
- Using a newer Font Awesome version but trying to show icons whose names were changed in the current version (using their old names).
- Trying to use new icon styles in older Font Awesome versions installation. Eg. trying to use .fas, .fad, .far classes in version 3 or 4 installation.
- Attempting to use Font Awesome in a framework where that version is not supported.
How to check Font Awesome version on your website
Step 1: Open a page on your website that uses Font Awesome in a web browser. Then right-click anywhere on the page and select the "View page source" option. Alternatively, you can press Ctrl + U.
Step 2: Open the Font Awesome CSS file at the <head> section of the HTML source code. In most scenarios, it will have the terms "fontawesome", "font-awesome" or something like "all.css" or "all.min.css" in its name depending on the version installed.
In some instances, the version will be indicated within the URL of the Font Awesome CSS file especially in CDN installations. In such a case, you won't even need to open the file.
On opening the Font Awesome CSS file, you will be able to see the version indicated at the top of the source code as in the screenshot below.
This method works if you had installed Font Awesome manually or through a CDN.
In the case of manual installation, you can also open the Font Awesome CSS file directly in your text editor and you will be able to see the version in the same way.
If you had installed via a Font Awesome kit, just log in to your Font Awesome account. Click on the user icon at the top right corner, then click on the "Kits" link in the options that will appear.
You will see a list of all the kits that you have created in Font Awesome. Click on the one in which you have installed/added to your website.
Click on the "Settings" tab of your kit.
Then scroll down to the version's section and you will be able to see which version your kit uses.
Conclusion
In this article, we have covered how Font Awesome version affects the use of icons on your website and why you should always be keen to know which version is installed on your website. With this information, you will be able to find quick fixes when icons do not show on your site.
We have also covered in detail, and in an intuitive step-by-step process, how to check the installed Font Awesome version on your site for all the installation methods.
It's my hope that this article was helpful to you. Stay tuned for more.
