[Solved]: Font Awesome icons not showing on my website | Web Developers Planet (2023)

John Mwaniki / 17 Nov 2021

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 in 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 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 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.

[Solved]: Font Awesome icons not showing on my website | Web Developers Planet (1)

The font awesome class fa was deprecated in version 5. To check for version 5 and later, 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>

[Solved]: Font Awesome icons not showing on my website | Web Developers Planet (2)

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 date has been undergoing a set 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 with a second class, "fa-icon-name".

Example

<i class="fa fa-user"></i>

But since 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 and their classes.

StyleClassExample
Solidfas<i class="fas fa-user"></i>
Regularfar<i class="far fa-user"></i>
Lightfal<i class="fal fa-user"></i>
Duotonefad<i class="fad fa-user"></i>
Brandsfab<i class="fab fa-facebook"></i>

If you are using Font Awesome version 5 or later, 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 5 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.

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 press Ctrl+U to open the source code. Open the font awesome CSS file in the <head> section of HTML code. On the top of the CSS file you should see the Font Awesome version as in the screenshot below:

[Solved]: Font Awesome icons not showing on my website | Web Developers Planet (3)

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 search box and categories navigation, which you can then easily copy and paste on your web pages.

Note: It's recommended for you to 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 5 has a total of 7,864 icons where only 1,608 icons are free and the rest are premium.

Version 6 (which is at the beta stage at the time of writing this article) has a total of 14,554 icons, where only 1,704 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 show 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.

Related Articles

  • [Solved]: Font Awesome unicodes via CSS "content" not working
  • How to install Font Awesome on a website and use its icons
  • How to add Font Awesome icons in your web pages using CSS
  • How to check Font Awesome version on your website
  • What does fa,fab,fad,fal,far and fas mean in Font Awesome?
  • How to make an HTML dropdown select with a searchbox
Top Articles
Latest Posts
Article information

Author: Duane Harber

Last Updated: 01/28/2023

Views: 6005

Rating: 4 / 5 (51 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Duane Harber

Birthday: 1999-10-17

Address: Apt. 404 9899 Magnolia Roads, Port Royceville, ID 78186

Phone: +186911129794335

Job: Human Hospitality Planner

Hobby: Listening to music, Orienteering, Knapping, Dance, Mountain biking, Fishing, Pottery

Introduction: My name is Duane Harber, I am a modern, clever, handsome, fair, agreeable, inexpensive, beautiful person who loves writing and wants to share my knowledge and understanding with you.