Font Awesome not working in Firefox & IE

Question

I\'m having an issue with font awesome which is included into a wordpress site. In Firefox and IE the icons won\'t show at all, however in Chrome & Safari it works fine.

Answer 1

I know this is an old post, but it did help me figure out some issues.

I have the standard apache configuration and mod_headers enabled.

I have a /font/ folder in the DOCUMENT_ROOT , adding an .htaccess in such folder (<DOCUMENT_ROOT>/font/.htaccess) with the content suggested by Markus worked on all the browsers:

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

Answer 2

You need to add a local rule if you want Firefox to use the font when installed on the computer. See https://developer.mozilla.org/Web/CSS/@font-face.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }

Answer 3

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

Add this line to the header.php file of the theme you are using. This fix worked for me.

Answer 4

If you're like me, modifying a web.config file is something you're not allowed to touch.

Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }