Font Awesome is a great icon resource and I encourage everybody to give it a try at least once. It’s my go to icon set whenever I’m using social media links on a website. One problem people run in to is that from time to time a random icon won’t load correctly in Firefox. Here are a few solutions if you notice one or all of your font’s aren’t working:
- Make sure your file path is working (if you’ve downloaded and decided to host it yourself) or make sure you copied the CDN correctly or that it’s up to date.
- Move your CDN link to the bottom of the query in the head tag or past the other CSS files. For wordpress, make sure you query it after your main css in the functions.php or if you are hard coding it in, put it after the wp_head(); function and it should render again normally.
- Lastly, if those haven’t worked and you are using the CDN you may need to open up the .htaccess add a few lines. (Thanks to VIVEK KUMAR PODDAR)
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>These are the three main methods I’ve used to fix Font Awesome on my website. Let me know if you have any other tricks that work.