![[Solved]: Font Awesome icons not showing on my website](https://www.webdevsplanet.com/assets/images/gallery/solved-fontawesome-not-working.webp)
[Solved]: Font Awesome icons not showing on my website
Are you using Font Awesome to show icons on your website pages but it doesn't seem to work for you and you can't figure out what the heck is wrong?
This can be so frustrating.
In this article, we will cover multiple possible causes of Font Awesome icons not showing on a website. In each of them, we will explore the different ways in which you can fix it.
1. Font Awesome is not properly loaded/installed
If the Font Awesome CSS file is not properly loaded on a web page, then its icons won't be displayed. There are different ways in which you can add the Font Awesome library to your website. They include:
- Manual installation
- Creating and loading a Font Awesome Kit
- Loading Font Awesome from a CDN
Fix for manual Installation
Make sure that the Font Awesome CSS file is loaded and that the "webfonts" folder is not missing from the website project.
To check whether the CSS file is loaded well, open your page source code on a web browser by right-clicking on the page and selecting "View page source" or pressing Ctrl+U while on the page.
Check in the <head> section if there is a Font Awesome CSS file loaded within <link> tags. It in most cases will have the term "font-awesome" or "all.css/all.min.css" in its name depending on the Font Awesome version used.
Click on it to open it. If it gets loaded well, you will be able to view its code. Else, you will be served with a 404 page not found error.
If you are able to view the source code of the CSS file, make sure that the file is loaded within the "href" attribute of the <link> tag and not within "src", something that many new developers confuse. Also, make sure that the <link> tag has rel="stylesheet".
It should look something like this:
<link rel="stylesheet" href="path/to/fontawesome.min.css">
As mentioned earlier above, make sure that the "webfonts" folder is not missing. The relative path between this folder and the Font Awesome CSS file loaded on the page should remain the same as it was when you downloaded and extracted the Font Awesome zip file.
Fix for installation via CDN
An installation of Font Awesome via CDN will look something like the below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
Or as below depending on the Content Delivery Network (CDN) you chose to use:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Just like in the case of manual installation, confirm that you can open the Font Awesome CSS file without showing a 404 error. Also, make sure that the file is loaded within the "href" attribute of the <link> tag and not within "src" and that rel="stylesheet" is not missing.
Fix for Font Awesome kit installation
In case you used the kit option to add Font Awesome to your website, make sure to counter-check to ensure that you copied and pasted the kit in the <head> section as it is from your Font Awesome account without making any changes to it.
Checking if Font Awesome is properly loaded using JavaScript code
Regardless of whichever method you used to install Font Awesome into your website, you can use JavaScript code to check whether Font Awesome was loaded properly.
<script>
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
alert(window.getComputedStyle(span, null).getPropertyValue('font-family'));
document.body.removeChild(span);
};
</script>
Copy and paste the above code before the closing </body> tag of your HTML page which you want to check if the Font Awesome was loaded.
Using the above code as it is will help you test for version 4 and earlier and will output an alert as below if Font Awesome is loaded properly.
The font awesome class fa was deprecated in version 5. To check for version 5, replace fa above with "fas" as below.
<script>
window.onload = function () {
var span = document.createElement('span');
span.className = 'fas';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
alert(window.getComputedStyle(span, null).getPropertyValue('font-family'));
document.body.removeChild(span);
};
</script>
In Font Awesome version 6, the version 5 classes (ie fas, fab, fad, etc) were deprecated and replaced with other classes such as fa-solid, fa-brands, fa-duotone, etc. Therefore, to check for version 6, use "fa-solid" in the JS code instead as below.
<script>
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa-solid';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
alert(window.getComputedStyle(span, null).getPropertyValue('font-family'));
document.body.removeChild(span);
};
</script>
If all the above tests indicate that Font Awesome is loaded well on your website, proceed to the other probable causes below.
2. Versions conflict
Font Awesome, since its initial release in 2012 to this day has been undergoing a series of updates and changes, which have been affecting how it works in one way or another.
For instance, before the release of version 5, all Font Awesome classes had the first class as "fa" then followed by a second class, "fa-icon-name".
Example
<i class="fa fa-user"></i>
But in version 5, the class "fa" became deprecated and was replaced with other different classes, each representing a different style as shown in the table below:
The table below shows a list of all icon styles in Font Awesome 5 and their classes.
| Style | Class | Example |
|---|---|---|
| Solid | fas | <i class="fas fa-user"></i> |
| Regular | far | <i class="far fa-user"></i> |
| Light | fal | <i class="fal fa-user"></i> |
| Duotone | fad | <i class="fad fa-user"></i> |
| Brands | fab | <i class="fab fa-facebook"></i> |
If you are using Font Awesome version 5, make sure that the first class of your icon is one of the above 5 classes and not fa eg <i class="fas fa-user"></i>.
If you are using version 4 or lower, make sure that the first class of all your icons is ONLY fa eg. <i class="fa fa-user"></i>. Using any other won't work.
For instance, if you try showing <i class="fas fa-user"></i> on Font Awesome 4, it won't get displayed.
In Font Awesome version 6, four extra styles were introduced which include Thin, Sharp Solid, Sharp Regular, and Sharp Light. All the first classes for version 5 were scrapped off and replaced with other different classes, each representing a different style as shown in the table below:
| Style | Class(s) | Example |
|---|---|---|
| Solid | fa-solid | <i class="fa-solid fa-user"></i> |
| Sharp Solid | fa-sharp fa-solid | <i class="fa-sharp fa-solid fa-user"></i> |
| Regular | fa-regular | <i class="fa-regular fa-user"></i> |
| Sharp Regular | fa-sharp fa-regular | <i class="fa-sharp fa-regular fa-user"></i> |
| Light | fa-light | <i class="fa-light fa-user"></i> |
| Sharp Light | fa-sharp fa-light | <i class="fa-sharp fa-light fa-user"></i> |
| Thin | fa-thin | <i class="fa-thin fa-user"></i> |
| Duotone | fa-duotone | <i class="fa-duotone fa-user"></i> |
| Brands | fa-brands | <i class="fa-brands fa-facebook"></i> |
The sharp styles comprise three classes while all the others comprise two classes differing only with the "fa-sharp" class.
If you are using Font Awesome version 6 on your website, make sure you are not using the classes fa, fas, fab, fad, far, or fal but instead as in the above table.
Note: Font Awesome allows you to add icons using ONLY <i> and <span> tags. If you use any other element they won't show. Only add your classes to either of the two.
How to fix Font Awesome version-related issues
Check and confirm the Font Awesome version used on your website. To do so, open a page you want to show icons on in a web browser.
Right-click on the page and select "View page source" or use the Ctrl+U keyboard shortcut to open the source code. Open the font awesome CSS file in the <head> section of the HTML code. On the top of the CSS file, you should see the Font Awesome version indicated as in the screenshot below:
Now that you know which version your website is using, you can go ahead and use only those icons that are supported by your Font Awesome version.
Below are the links to libraries of all the Font Awesome icons for each version from v3 to 6. On these pages, you will be able to easily find your valid icons of preference through the search box and categories navigation, which you can then easily copy and paste onto your web pages.
- Font Awesome v6 icons library
- Font Awesome v5 icons library
- Font Awesome v4 icons library
- Font Awesome v3 icons library
Note: It's recommended that you upgrade to the latest Font Awesome stable version.
3. Trying to use premium icons on a Free Font Awesome installation
Font Awesome comprises both free and premium icons.
Font Awesome version 6 has a total of 28,127 icons where only 2,020 icons are free and the rest are premium.
Version 5 has a total of 7,864 icons, where only 1,608 are free and the rest are premium.
Premium, also referred to as PRO is paid for. You can pay for a yearly subscription or pay for a perpetual Pro license.
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show.
The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
Conclusion
The use of Font Awesome is the most popular way among web developers for adding icons to websites across the world.
Font Awesome is very easy to install and shows its icons on web pages. However, developers often find themselves in situations where they are unable to show/display their desired icons.
These may be due to different causes such as Font Awesome not being loaded properly on the web page, version conflicts, or trying to show premium icons on a free installation.
In this article, we have covered each of these possible causes in-depth and the solution to each.
It is my hope that this article was helpful to you and that through it, you were able to fix your problem. That's all for this article.
