从文件系统或IIS提供服务时，字体真棒图标无法正常工作

Question

所以我在我的项目中使用Font Awesome。目前，Grunt正在开发中。问题是，当我尝试从文件系统或IIS运行该站点时，图标不起作用。它们是无法识别的符号。 Grunt和IIS都来自同一个文件夹，所以事情应该是相同的。

Chrome和IE正在发生这种情况。我确认没有任何404（如果找不到文件，我会收到邮箱）。

我使用的是Font Awesome 4.3.0。

这是Grunt提供的服务：

这里是从文件系统和IIS提供的服务：

这是HTML的样子：

<li>
  <a href="#">
    <i class="fa fa-clock-o"></i>Operations
    <span class="fa arrow"></span>
  </a>
</li>

Answer 1

终于搞定了！

我正在使用SASS库进行Font Awesome。在我的主要SASS文件中，我有：

@import 'variables';
@import '../../vendor/font-awesome/scss/font-awesome';
@import 'bootstrap';
@import 'layout';

我需要做的是将Bootstrap放在Font Awesome前面。所以现在看起来像这样：

@import 'variables';
@import 'bootstrap';
@import '../../vendor/font-awesome/scss/font-awesome';
@import 'layout';

显然Bootstrap的风格干扰了Font Awesome风格。我仍然无法弄清楚为什么它在Grunt服务时起作用，而不是由IIS /文件系统服务。但请注意，在任何库拥有自己的Font Awesome实现后，应该包含Font Awesome。

Answer 2

所以之前的SASS导入订单结果证明不能解决我的问题。

我最后在SASS回购中偶然发现了这个问题：https://github.com/sass/sass/issues/1395。

阅读问题评论，似乎当SASS进行压缩时，它会将字体真棒字符从转义的ASCII序列更改为unicode。所以我们需要明确，以便浏览器知道如何解释它。

最后，为我解决的问题（希望这次确定）是添加

<meta charset="utf-8" />

到我的head。

手指交叉，最终修复了。