If you are using font awesome then you might have noticed that icons fonts don’t appear in Firefox and it happens when you try to use CDN services.
The reason is, when we use any content delivery network then the contents are not served directly from origin server but are served from other domain that’s yourcdn.domain.com ( which is a masking name of other domain ).
Actually, this kind of problems occurs because of cross-origin resource sharing issue or in short form CORS.
So the question is how to fix this problem since it might be damaging the awesome look of your website or of your service. Continue reading for a possibly perfect solution.
What’s The Exact Problem With Font Awesome
CORS is a protective measure and it helps to prevent the direct or indirect access to other server files. This, in turn, helps to prevent hackers and other messy peoples from attempting hacks or possible damages to others content and data.
See, when we use any CDN service then our content are not served directly from our hosting servers but are served from dozens of other servers. So you can say when any one load your website, your stylesheet calls the icon font, the request is then sent to the server which is now processed by your CDN and now CDN tries to call font awesome directory to display the required data. But it also asks the web browsers not to download it and here’s the exact problem.
You might have noticed that the icons will appear properly in Google chrome, but it doesn’t work with Firefox and internet explorer. Since chrome doesn’t obey such request but other web browsers pay attention to such request.
Solution For Font Awesome Not Displaying In Firefox
I have scanned Google search pages for more than an hour to find the perfect solution. But finally got my answer from maxcdn official support page. Here’s the example of .htaccess file. If you check it line by line then you will find the fix.
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
You have to just copy the exact code snippet into your website’s .htaccess file. Follow to steps provided below to navigate to it.
- Move to your web hosting.
- Login to your cPanel.
- Now move to File Manager.
- Navigate to Public HTML folder.
Now use the code editor to edit the file and paste the code at the very top. Now simply save it, refresh your page, clear all caches if you are using any plugin. Also, purge cache from your CDNs account.
Now reload the website and you will see that font awesome is displaying the icons in Firefox.
Thanks a lot for this!
I tested it in all famous Browsers on Mac, Win, Android and iOS. I still have the font problem in IE11 (win) and chrome55 mac. Are there fixes for these browsers, too?
I’ll add this code in html page or .htaccess , I’m completely lost 🙁
I want to fix this problem in my website: http://portal.bu.edu.eg
Editorial Team says