![[Solved]: Font Awesome icons not showing on my website](https://www.webdevsplanet.com/assets/images/blog/fontawesome-icons-not-showing.jpeg){kind=icon}
[Solved]: Font Awesome icons not showing on my website
Font Awesome is a popular icon library used by millions of designers and developers to add icons to websites as a way to enhance the visual appeal of websites.
However, you may experience challenges where icons added through Font Awesome fail to properly display on your website.
Blank squares or nothing at all gets displayed. In some instances, some icons are shown while others aren't. This can be so frustrating especially when you can't figure out what the problem is. I have also been in the same situation before and managed to fix it. I have also helped many people fix Font Awesome issues, caused by different reasons.
In this article, I tested multiple case scenarios, compiled a list of potential causes that may lead to Font Awesome icons not showing on a website, and provided comprehensive solutions for each.
Below are the common causes and solutions for Font Awesome icons not showing:
1. Font Awesome is not properly loaded
You need to first load the Font Awesome library in your pages before trying to use its icons. If it 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 (self-hosted) installation
- Installation via Font Awesome Kit
- Loading Font Awesome from a CDN
Fix for Self-hosted Installation
If you downloaded Font Awesome to host the files locally on your website, make sure that the CSS file is loaded properly 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 by using the Ctrl+U keyboard shortcut 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. Otherwise, you will be served with a 404 page not found error.
If you can 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">
Ensure "webfonts" folder exists and its files are properly referenced
Another reason Font Awesome icons may not be showing is if the FontAwesome CSS cannot find the required font files. These are stored in a folder called "webfonts". As I mentioned earlier above, make sure that this folder is not missing in your project.
The relative path between this folder and the Font Awesome CSS or JS file loaded on the page should remain the same as it was when you downloaded and extracted the Font Awesome zip file, i.e., the "css" (or "js") and "webfonts" should be in the same directory, where the linked Font Awesome CSS or JS file should be inside the "css" or "js" folder respectively.
Link to the "all.min.css" or "all.css" file for version 5 or later
For Font Awesome 4 and earlier versions, the installation would involve linking to the "fontawesome.css" file. However, if you link to this file in version 5 or later, the icons won't show. This is because it lacks the @font-face that references to the webfonts folder.
If you are using version 5 or later, you should instead link to the "all.css" or "all.min.css" files. The only difference between the two files is that the ".min" is minified while the other is not. These files contain the core styling for all the icon styles that you’ll need when using Font Awesome and references to all the font files in the "webfonts" folder.
Fix for installation via CDN
An installation of Font Awesome via CDN will look something like the below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Or as below depending on the Content Delivery Network (CDN) you chose to use and the version:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css" integrity="sha384-BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK" crossorigin="anonymous">
Just like in the case of manual/self-hosted 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.
In some cases, your link to the CDN may look like below, i.e. starting with //.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
If that's your case, add https: at the beginning of the URL so that it looks like below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
In case all the other solutions suggested don't work, try changing to a different CDN or download and self-host the files.
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 the JavaScript code below to check whether Font Awesome was loaded properly.
<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>
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 and then open the page in a browser.
When using Font Awesome v6, then the code will open an alert box as below if it is loaded properly.
To check for version 5, replace fa-solid 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>
To test for version 4 and earlier, use the code below.
<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>
Depending on your version, if 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" was deprecated and replaced by 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 earlier, ensure 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 be 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 from 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.
It is important to note that new icons get introduced in newer versions and some old ones change their icon names or name structure than you've known them by before. Besides using the correct prefix class for your version, double-check to ensure the icon you are trying to add exists in that version, and with that name.
If you use an icon that was not yet introduced in that version or an older icon that no longer exists in the version you are using, it will not be displayed.
Also, if your site is loading more than one version of Font Awesome, there will be lots of collisions and the icons may not render as expected.
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.
Avoid loading multiple conflicting versions of Font Awesome on your website. Instead, use only one version that you intend to add its icons. This will ensure there is no overlap between versions and the icons will show well with no issues.
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 30,013 icons where only 2,037 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.
The premium version, 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.
While some icons are available in different styles for both FREE and PRO, others are only available in Font Awesome Pro. If using the free version, ensure a free icon style exists and reference to the right style class.
Only use icons from the free set or else obtain a Pro license.
4. Changing the icon classes font-family or font-weight properties
Just like all other characters on the page, Font Awesome icons, being icon fonts, also have the font-family and font-weight properties.
There are several font families which vary depending on what Font Awesome version you are using on your site. You can see them assigned to various prefix/style classes as in the example below if you check in the Font Awesome CSS files.
/*Font Awesome v6*/
.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular {
font-family: 'Font Awesome 6 Free';
}
.far,
.fas,
.fa-solid {
font-weight: 900;
}
.fa-regular {
font-weight: 400;
}
.fab,
.fa-brands {
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
}
/*Font Awesome v5*/
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
.fa, .fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
/*Font Awesome v4*/
.fa {
font-family: 'FontAwesome';
}
However, unlike the other types of characters, which you can change and assign any font family that you wish, Font Awesome classes need to retain their original Font Awesome font families and font weights, or else they won't display.
Even if you have not explicitly changed the icon classes font-family, it is possible to have done it unknowingly. When styling your pages with CSS, it's a common practice to enforce a specific font family on all elements on the page for branding purposes, and the simplest way to do it is by using the universal selector (*) as below:
* {
font-family: Helvetica,sans-serif !important;
}
Or to set font-weight for some or all elements as below:
* {
font-weight: 400 !important;
}
/* In <i> and <span>*/
i {
font-weight: 500 !important;
}
/* Or even to any parent element to the icon element*/
p {
font-weight: 500 !important;
}
Using the !important rule in the font-family or font-weight properties for all elements, or on <i> and <span> elements or their parents override the required Font Awesome font and font-weight which in turn causes the icons not to be displayed.
Ensure you have not overwritten the Font Awesome icon classes font-family and font-weight properties in your CSS style of the page.
If you added your icons as Unicode using CSS, check here to fix font family and weight issues.
5. Missing an icon class
This was already covered in another point above but I'll however reiterate it. Font Awesome icons are displayed by adding two (or 3 in the case of sharp icons) icon classes to an <i> or <span> element. The first class specifies the icon style (e.g., brand, solid, regular, duotone, etc), and the second identifies the actual desired icon.
If you miss one of the classes, the icon won't show. Ensure you have all the classes.
<!-- Wrong -->
<i class = "fa-user"></i>
<!-- Correct for v5-->
<i class = "fas fa-user"></i>
<!-- Correct for v6-->
<i class = "fa-solid fa-user"></i>
6. Typos in the icon classes
This can be easily overlooked, but it's possible to make a typo when manually writing the Font Awesome icon classes.
Double-check to ensure there are no spelling mistakes in the two icon classes. It's even better if you copy-paste it instead of typing.
7. Blocking of font file types
This may not be very common but it is important to confirm. If the file (ttf, svg, eot, or woff) extensions, that Font Awesome uses are blocked on your site, the icons won't be displayed.
Check your .htaccess file to ensure it isn't blocking these file types.
8. Cache issue
When a user visits a website, the web browser stores copies of the webpage files (e.g., .css, .js, .png, etc) in a temporary storage location on the user's device, known as a cache. This is to load them from the local storage instead of requesting them from the server the next time the user visits the page, effectively speeding up the loading time.
While this is generally good, it may cause issues after changes are made on the site. Perhaps after making changes, your icons aren't showing because your browser is loading the files from the cache instead of the updated ones.
If you think everything is done well but icons aren't showing on your site, try doing a hard refresh (Ctrl + F5), clearing the cache, or using a different browser or device to view the site.
If you don't want to clear all the cache, here is how to clear the cache for a specific website.
Conclusion
Font Awesome is a popular and powerful way to add visually appealing icons to websites. It's very easy to install and use.
However, it is common to find yourself in a scenario where your desired icons don't show on the website as expected. This could 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 among others.
In this article, we have covered each of these possible causes comprehensively and offered a solution to each.
It's my hope you found this article helpful and that by addressing the potential causes covered, you were able to fix your problem. That's all for this article.
