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 a website.
Blank squares or nothing at all gets displayed. In some cases, some icons are shown while others aren’t. This can be so frustrating especially when you can not figure out what the problem is. I’ve also been in the same situation ahead and managed to fix it. I’ve also helped numerous people fix Font Awesome issues, caused by different reasons.
In this article, we will look into multiple potential causes of Font Awesome icons not showing on a website and provide comprehensive solutions for each.
Below are the causes and solutions for Font Awesome icons not showing:
1. Font Awesome isn’t correctly loaded
You need to first load the Font Awesome library in your pages before trying to use its icons. However, also its icons will not be displayed, If it isn’t correctly loaded on a web page. 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
Still, make sure that the CSS file is loaded correctly and that the “webfonts” folder isn’t missing from the website, If you downloaded Font Awesome to host the files locally on your website.
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 click “View page source“ or by using the Ctrl+U keyboard shortcut while on the page.
Check in the <head> section if there’s 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. However, you’ll be good to view its code, If it gets loaded well. else, you’ll 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 tag and not within “src”, reality is that many new developers are confused here. Also, make sure that the <link> tag has rel=” stylesheet”.
It should look 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 displaying is if the FontAwesome CSS can not find the required font files. These are stored in a folder called” webfonts”. As I mentioned before above, make sure that this folder isn’t 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 separately.
[Img]
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. still, if you link to this file in version 5 or later, the icons will not 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
Font Awesome installed through CDN will look like this:
<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 follows, depending on the Content Delivery Network (CDN) you choose to use and the version:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK" crossorigin="anonymous">
Just like with manual/self-hosted installation, make sure that you can access the Font Awesome CSS file without receiving a 404 error. Also make sure that the file is loaded into the ‘href’ element of the ‘link’ tag instead of the ‘src’ element, and that rel=”stylesheet” is not missing.
In some cases, your link to the CDN may look like the following, i.e. starting with ‘//’.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
If that’s the case, include https: at the start of the URL to make it look like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
If none of the other recommended solutions work, try switching 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 double-check 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 the method you used to install Font Awesome on your website, you can use the JavaScript code below to check whether Font Awesome is loaded correctly.
<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 to check if Font Awesome has been loaded and then open the page in a browser.
If the code is loaded properly, Font Awesome v6 will open an alert box as shown below.
[Img]
To verify version 5, replace fa-solid with ‘fas’ like the following.
<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>
[Img]
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>
[Img]
Depending on your version, if the tests above show that Font Awesome is loaded well on your website, then proceed to the other probable causes below.
2. Versions conflict
Font Awesome has undergone a series of updates and changes since its initial release in 2012, which have affected how it works in one way or another.
Before version 5, all Font Awesome classes had ‘fa’ for the first class and ‘fa-icon-name’ for the second class.
Example
<i class="fa fa-user"></i>
In version 5, the class ‘fa’ was replaced by different classes that represent a different style, as illustrated in the table below.
Below is a list of all the 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’re using Font Awesome version 5, ensure that the initial class of your icon is one of the five mentioned above, not fa. For instance, <i class=”fas fa-user”></i>.
If you’re running version 4, make sure to keep the first class of your icons as fa. For example,<i class=”fa fa-user”></i>. Using any other class will not work.
For instance, if you try to display <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:
In Font Awesome version 6, four additional styles were introduced, including Thin, Sharp Solid, Sharp Regular, and Sharp Light. All the first classes for version 5 were scrapped and replaced with other different classes, each representing a different style as shown in the screenshot.
| 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 have three classes, while all other styles have just two classes, apart from the ‘fa-sharp’ class.
When using Font Awesome version 6, ensure you are not using the classes fa, fas, fab, fad, far, or fal, but rather as suggested in above table.
Note: Font Awesome allows you to use only <i> and <span> tags to add icons, otherwise any other element will not display. Only add your classes to eith.
It’s important to note that new icons are introduced in newer versions and certain old ones have changed their icon names or name structure, which you may not be aware of. In addition to using the correct prefix class for your version, double-check to make sure that the icon you’re trying to add is present in that version and with that name.
If you use an icon that hasn’t been introduced in that version or an icon that’s outdated in the current version, it won’t be displayed.
If Font Awesome is loading multiple versions on your site, there may be multiple collisions and the icons may not appear as expected.