Font Awesome Icons not Working in Firefox? Probable cause and a fix

Firefox refused to display my Font Awesome icons. After some research I found it was a cross-domain issue created by the fact that the files were being served from a CDN. (Specifically, WP Engine’s CDN.)

The fix for me was to place an .htaccess file inside the font directory containing these lines:

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

This cleared it up for me. All now works as it should.

Catalin Rosu nicely explains the situation and the reason behind it here. (Firefox is actually behaving as it should.) If you’re using an nginx for your webserver, Rosu also mentions a possible additional required step.

One other potential alternative option is to embed the fonts as base-64.

14 Responses to “Font Awesome Icons not Working in Firefox? Probable cause and a fix”

  1. Jeremiah

    Thanks so much for this awesome post! That saved me a ton of time, and took less than 3 minutes to implement. Worked like a charm! Now I just need to figure out why it still doesn’t work in IE 10.

    Reply
  2. David Cochran

    Jeremiah,
    Thanks for the note! Glad it was helpful. I’d love to hear what you find with IE 10.

    Reply
  3. Jen R

    you rock :D the weird thing is, i have three sites all using the same code, same server, etc.. worked on the two subdomains but not the main domain.

    thanks,
    Jen

    Reply
    • David Cochran

      Thanks Jen! That’s pretty weird. Glad this helped. Nowadays I include that htaccess file with my icon fonts all the time every time. All the best!

      Reply
  4. Skaputnik

    Well, I am using Joomla, so I had trouble finding the “fonts” folder. But I found it inside the TEMPLATES >>> TEMPLATENAME folder.

    I created the htaccess you said and, up ’till now, nothing… Still displays a weird box with some numbers inside…

    Reply

Leave a Reply