从文件系统或 IIS 提供的 Font Awesome 图标不起作用答案

【问题标题】：Font Awesome icons not working when served from file system or IIS从文件系统或 IIS 提供的 Font Awesome 图标不起作用
【发布时间】：2015-04-01 03:20:12
【问题描述】：

所以我在我的项目中使用了 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>

【问题讨论】：

控制台有错误吗？也看看这个帖子stackoverflow.com/questions/23007250/…
不。没有什么。这几乎就像文件已损坏，但所有服务器都共享同一个文件。

标签： css iis fonts font-awesome

【解决方案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/文件系统提供的。但请注意，在任何库拥有自己的 Font Awesome 实现之后，都应该包含 Font Awesome。

【讨论】：

【解决方案2】：

所以之前的 SASS 导入排序结果并不能解决我的问题。

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

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

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

<meta charset="utf-8" />

致我的head。

祈祷终于解决了。

【讨论】：