Thursday, 18 July 2019 14:13

How to make icofont and fontawesome appear in Firefox

Written by
Rate this item
(1 Vote)
Firefox Firefox accrodigital

If like me you use font awesome or icofont and the iconic fonts worked perfectly in all major supported browsers like Edge, Chrome or safari but you are having trouble in having them displayed or loaded in Firefox, then read on to  follow this simple tutorial.

 

Why does icofont/ font awesome not work with Firefox but yet they work with Edge, Chrome and Safari?

The reason is that Firefox doesn’t allow cross-domain fonts by default for security reason- unless you set an Access-Control-Allow-Origin header to the font. The issue with Font Awesome and icofont and Firefox is restricted to websites that load Font Awesome via a CDN. The reason for the issue is CORS and how it’s implemented in Firefox. There isn’t a fault in Firefox but rather is a security precaution.

Possible Fix & Solution: Access Control Allow Origin

The solution is to add some script to the website .htaccess file on your server in order to have Firefox load Font Awesome from a CDN. If you do want to keep using the Font Awesome CDN then adding the following to your .htaccess file should overcome issues displaying icons in Firefox:

<IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>

This solution worked for us, it may not work for you if you Below is a reminder on how to install icofont:

How to install icofont on your website

Download the icons by clicking on the download button on the icofont website located at the top right corner of each page which will provide you the entire collection. Alternativaly, you may browse the icons, add to your collections and then download a limited slection only. This will download only the icons that you selected.

Once you clicked on dowload, a zip file will be downloading. Extract the content of the zip file and you should have the iofont folder with 1 fonts folder, 2 x css files and 1 demo.html file . The demo HTML file demonstrates the icons with their unicodes (although it is much easier and better to chek the site https://icofont.com/icons.

You then need to copy the entire IcoFont directory into a folder of your choice on your server. In my case I placed it in my images folder as follows: /images/icofont. In the <head> of your site html, maake sure that you refer the location to your icofont.min.css as follows

<link rel="stylesheet" href="/images/icofont/icofont.min.css">

Read 265 times Last modified on Tuesday, 23 July 2019 10:38
More in this category: « HTML Entities Complete List2
Login to post comments