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.

I have found "solutions" which say I need an .htaccess with certain content to provide support for these browsers, however, if i use this approach, Safari and Chrome are suddenly having issues themselves and Firefox and IE are still not working.

Does anyone have any further ideas?

Here is the error message put out by the firefox dev error log when loading my site:

Fehler: downloadable font: download failed (font-family: "icomoon" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff Quelldatei: http://mysite.de/wp-content/themes/heat/style.css Zeile: 0 Quelltext: @font-face { font-family: "icomoon"; font-style: normal; font-weight: normal; src: url("fonts/icomoon/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon/icomoon.svg#icomoon") format("svg"), url("fonts/icomoon/icomoon.woff") format("woff"), url("fonts/icomoon/icomoon.ttf") format("truetype"); }

Thanks for you help!

P.S. The icons on the font awesome website work fine in FF by the way.

• UPDATE *

ok after reading a lot of forum posts on this issue i have come to the following conclusion: most people are having this issue because they are loading their fonts from an external server. by adding the .htaccess code to allow FF to do just that, they are solving their issue. now, since i'm loading my fonts from my own server, the .htaccess approach did not help me. what did get rid of the error message shown above however, was changing the path to the font in the css from a relative to an absolute path. now the funny thing is -- the error message does not show up any longer when loading the site, but the icons don't either! still no change, yet no error message. I'm confused!

• UPDATE 2 *

I found a fix --

After changing all the paths in the css from relative to absolute (i.e. www.mysite.de/fonts/... instead of just /fonts/...) AND adding the .htaccess file containing the following lines:

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

to the /fonts directory, everything works fine in Firefox, Chrome and Safari. Haven't had a chance to check IE yet, but it appears that this was the issue.

Hope someone who runs into the same issues will get some help from this.

Answer 1

<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.