Fontawesome图标不适用于IE9和Chrome [英] Fontawesome Icons not working on IE9 and Chrome

问题描述

我正在使用最新的可用版本。但是，图标仍然出现在我的应用程序在IE9框（注意：它在IE8上工作正常）。虽然当打开fontawesome页面时，图标显示正常。

这是我在开发人员工具的控制台中得到的：

CSS3117：@ font-face失败的跨域请求。资源访问受到限制。
fontawesome-webfont.eot？＃iefix& v = 3.0.1
CSS3117：@ font-face失败的跨域请求。资源访问受到限制。
fontawesome-webfont.woff？v = 3.0.1
CSS3117：@ font-face失败的跨域请求。资源访问受到限制。
fontawesome-webfont.ttf？v = 3.0.1

我也发现它不适用于Firefox。它只能在chrome和IE8上运行

任何帮助可能导致问题的原因??

解决方案

像控制台说：你正在做跨源字体加载，而不是从服务器发送正确的头，以允许。请参阅 http://dev.w3.org/csswg/css3-fonts /＃同源限制（对于Chrome和IE没有关注）。

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

这篇关于Fontawesome图标不适用于IE9和Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！