When using Firefox to browse the internet occasionally you come across websites where Font Awesome icons do not display but are fine when viewed in another browser. This seems to be caused by a couple of things.
- using relative URLs
- When that website is using a CDN
- You are running an add blocker
- possibly other things
The Fix
There are a few solutions and are quite easy. Not all might be suitable.
- Use absolute URLs - This might be an issue but i would never use absolute URLs so i would recommend other solutions where possible
- Add the following code to your server's .htaccess file
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
- Disable any Adblocker or similiar addons
Links
- Font Awesome Doesn't Work In Firefox : Fixed - Excellent article with background information and recommends the .htaccess method.
- Font Awesome Firefox Bug Fix - MaxCDN Blog - use absolute URLs.
- Font Awesome not working in Firefox (possible fix found) · Issue #755 · cdnjs/cdnjs · GitHub - Useful thread on this subject.