Fontawesome Icons not working on IE9 and Chrome

问题:

I am using the latest available version available. But the icons are still appearing as boxes in my app on IE9 (Note: It's working fine on IE8). Although when opening fontawesome page, the icons appear normal.

This what I get in the console of the developers tool:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. fontawesome-webfont.eot?#iefix&v=3.0.1 CSS3117: @font-face failed cross-origin request. Resource access is restricted. fontawesome-webfont.woff?v=3.0.1 CSS3117: @font-face failed cross-origin request. Resource access is restricted. fontawesome-webfont.ttf?v=3.0.1

I also find out it not working on Firefox. It works only on chrome and IE8

Any help in what may be causing the problem ??

回答1:

Like the console says: you're doing cross-origin font loads and not sending the right headers from the server to allow that. See http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction for the spec on this (which Chrome and IE are not following).

回答2:

Mine was blocked by htaccess.

I have this on my .htaccess and had to add the extensions.

# Do not process images or CSS files further
RewriteRule \.(css|jpe?g|gif|png|js|ico|mp3|ogg|eot|svg|ttf|woff)$ - [L]