DigitalFlare

Font Awesome not working in Mozilla Firefox?

TLDR: Host the files locally or change your .htaccess settings to bypass CORS..

Font Awesome icons do not load correctly in Firefox due to a browser restriction when the Font Awesome JS/font files are loaded via a CDN. The reason for the issue is CORS and how it’s implemented in Firefox. There isn’t a fault with the implementation in Firefox, but rather it is a security precaution.

The safest way to get Font Awesome icons to display consistently between browsers is to serve Font Awesome from your hosting server. Head over and read the documentation on the Font Awesome website regarding hosting fonts on your own server.

However, if you must load via the CDN - there is a .htaccess workaround I found works... Simply add the following to your .htaccess file:

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

The above instructs the browser to ignore the CORS (Cross-Origin Resource Sharing) security flag for the above file types. I hope this helps!