从文件系统或 IIS 提供时，Font Awesome 图标不起作用

Question

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

这发生在 Chrome 和 IE 上。我确认没有任何 404（如果找不到文件，我会收到框）。

我正在使用 Font Awesome 4.3.0。

这是来自 G运行t 的服务：

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

这是 HTML 的样子：

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

Answer 1

终于明白了！

我正在使用 Font Awesome 的 SASS 库。那么在我的主 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/File System 提供服务时起作用。但请注意，在任何库都有自己的 Font Awesome 实现之后，应包含 Font Awesome。

Answer 2

所以之前的 SASS 导入排序并没有解决我的问题。

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

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

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

<meta charset="utf-8" />

给我的 head.

万幸这终于解决了。

Font Awesome icons not working when served from file system or IIS