Are you tired of Font Awesome icons not showing on my Website? If so, you are on the right article. Making website owners have problems with Font Awesome icons on their site. Therefore, here are some ways to solve font awesome icons not showing on the website.
This article will show you how to solve Font Awesome not working in WordPress, font awesome Unicode not working, and also get information on Font Awesome five free CDN. In addition, you will get a complete guide to solving the font problem.
Table of Contents
What are Font Awesome and Solve Font Awesome icons not showing on my Website?
Font Awesome is a CSS file that consists of icons for a website like email icons, WhatsApp icons, and phone icons. Moreover, we can find many numbers of CSS files like Google fonts, Flat icons, etc. In addition, Font Awesome is used by most websites. For example, we can find about 1,600 icons on the free site.
Nowadays, font awesome features allow using of icons and logos to leave links to your social accounts. In addition, you can get a pro or free version and use it on your website. Moreover, you can change the size, and color and rotate it as your wish in which font awesome change icon on hover. Therefore, you can add font awesome icons to all of our buttons in our social media links.
List of Font-Awesome 5 free CDN
On the internet, we can find free and premium CDN while searching. But, Website owners often use free CDN. So, here are some latest CDN links:
Font Awesome CDN Cloudflare provides links for the Fontawesime CSS file. On the website, the @font-face tag is used inside CSS for loading various fonts. While loading, a single CSS file will automatically load all the fonts(branded and non-branded).
Here are some most needed free CDN of Fontawesome CSS and Fonts.
- Use Font awesome CDN 5.9.0
- Font awesome CDN 5.8.2
- STACKPATH Bootstrap CDN 4.7.0
- Cloudflare CDN 5.9.0
- Cloudflare CDN 4.7.0
Above all the links are CSS files. Moreover, CDNJS files are hosted in Cloudflare.
How do I solve Font Awesome icons not showing on my Website Issue?
If Font Awesome file is not working on the web page, then icons won’t be showing. So, there are different ways to solve the problem in different ways.
Here are some ways to solve the problem:
Fixing the manual installation
At first, check if the Font Awesome CSS file is installed and loaded correctly. Moreover, Check if the “Webfonts” folder is not missing from the website.
After checking the CSS file is loading, open-source code on the web browser by right-clicking on your page or open it by pressing Ctrl + U on the page.
Now, check the <head> section and <link> tags if the font awesome CSS file is loading or not.
if you can view the code of the website, then you can check if there is a link missing in “href”, <link> or with “src.” and solve it.
Fix for installation via CDN
While installing Font Awesome via CDN it looks like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">Just like manual installation, If the website shows 404 error, you cannot continue the process. Therefore, remember to check your font awesome CSS file for any 404 error. Then, make sure the file is loading with “href” attribute of the <link> tag and “src.”
Fix for Font Awesome kit installation
In some cases, while installing font awesome using kit option. So, check if you have copied and pasted the kit in the <head> section from the awesome account without making any changes.
Check if Font Awesome is properly loading using javascript code.
Whatever font awesome you have installed on your website, you should check your javascript code to see whether font awesome is loading 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>
You can copy and paste the above code in the </body> tag of your HTML page. So that, you can check whether Font Awesome is loading or not on the website.
Using the above code will check your version 4 and an alert message will come as below.
Moreover, you can check your version 5 or later. just replace fa 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>
Fix Font Awesome version related issues
Font Awesome, after the release of 2012, there have been updates and changes. So, after the update there are some problems in each version.
Now, right-click on the page and select “View page source” to open the source code. After that, open font awesome CSS file in <head> section of HTML code.
As in the screenshot, you can see your font awesome version.
Therefore, you know which version your website is using. After that, you can use those icons that are supported by your Font Awesome version.
Sum up
In this article, we got information on the use of Font Awesome. The article also clarifies that It is one of the most popular websites for its unique use. Moreover, it is very easy to install and show icons on the website. To sum up, we hopefully solved your issue on “Font Awesome icons not showing on my Website.“
Hopefully, you will learn more about WordPress by following this article: How to Add No Follow to External Links in WordPress?
