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 ??
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).
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]
上一篇: 解决FontAwesome文本渲染的差异