Fontawesome 图标在 IE9 和 Chrome 上不起作用答案

【问题标题】：Fontawesome Icons not working on IE9 and ChromeFontawesome 图标在 IE9 和 Chrome 上不起作用
【发布时间】：2013-01-19 02:14:52
【问题描述】：

我正在使用可用的最新可用版本。但是这些图标仍然在我的 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

任何可能导致问题的帮助？？

【问题讨论】：

标签： internet-explorer firefox font-awesome

【解决方案1】：

我的被 htaccess 阻止了。

我的 .htaccess 上有这个，必须添加扩展名。

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

【讨论】：

【解决方案2】：

就像控制台说的那样：您正在执行跨域字体加载，而不是从服务器发送正确的标题来允许这样做。请参阅http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction 了解有关此的规范（Chrome 和 IE 未遵循该规范）。

【讨论】：

我仍然不知道该怎么做才能让它工作。提供的解决方案已经处理，这就是 fontawesome 的定义方式：@font-face{ font-family:'FontAwesome'; src:url('font/fontawesome-webfont.eot?v=3.0.1'); src:url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') 格式('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.0.1') 格式( 'woff'), url('font/fontawesome-webfont.ttf?v=3.0.1') 格式('truetype');字体粗细：正常；字体样式：正常 }
好的，但是这些链接是相对于样式表的。您是否从与网页相同的主机名加载样式表？
不，我的样式表是从 AmazonS3 加载的，而 html 模板是从 heroku 加载的。
对，所以它从与网页不同的服务器加载字体。规范说，只有当该服务器发送正确的标头以允许此类跨站点链接时，这才应该有效。您可能对stackoverflow.com/questions/12229844/… 感兴趣
我也遇到了这个问题，并且已经解决了 Firefox 的跨源策略问题，同样的修复似乎不适用于 IE11（我不应该感到惊讶）。