如何调试 Font-Awesome 图标？

Question

我使用 Font-Awesome 及其图标已经有一段时间了，它运行良好。

然而，今天它只显示空白方块而不是图标。我已经阅读了许多其他相关问题，但这些案例都不适用于我。正如我所说，它以前可以工作，而且我没有对 Font-Awesome 文件（我使用的是 FA 的下载版本，而不是 CDN）或显示图标的 HTML 模板进行任何更改。

所以我想开始调试这个过程。一个例子是这样的：

<i style="color: orange" class="fa fa-exclamation-triangle"></i>

但是，在使用 Chrome 进行检查时，我在受影响元素的 CSS 中找不到任何 url。我在每个图标元素上看到的都是这样的：

.fa-warning:before, .fa-exclamation-triangle:before {
    content: "\f071";
}

其中\f071 是“空白方块”字符。

所以我的问题是：

图标从何而来，一般如何调试未显示的 FA 图标？

更新

我发现\f071 及其朋友实际上是指代图标的符号，存储在字体文件中。它们显示为空白方块的事实似乎表明字体尚未成功加载。

不过，我查了一下，客户端下载了fonts/fontawesome-webfont.woff和fonts/fontawesome-webfont.ttf就好了。

此外，元素的字体通过fa 类正确设置：

font-family: normal normal normal 14px/1 FontAwesome

还需要什么来确保字体已成功加载？

更新

我解决了：字体文件已损坏/未正确交付。总是要先检查一下！

Answer 1

FontAwesome 是... 一种字体！

这意味着您将拥有一组字符，它们是（视觉上的）图标。这些字符一般包含在\e000 和\f8ff 之间（它们是private use area 的字符）。

当你看到这段代码时：

.fa-warning:before, .fa-exclamation-triangle:before {
    content: "\f071";
}

表示\f071 字符将显示在伪元素中。它与此代码相结合，为.fa 元素加载 FontAwesome 字体：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

看到一个白色方块意味着：

• 您的字体未加载（最常见的问题）
• 您的字体没有创建好（重新下载）
• 您的 CSS 缺少字体声明 (@font-face {})
• 您的 CSS 缺少字体调用 (font: normal normal normal 14px/1 FontAwesome;)

如何调试：

1. 检查您使用的类名是否正确 (.fa .fa-foo)
2. 检查您的 FontAwesome CSS 是否已加载（当您看到正方形时应该是这种情况）
3. 再次检查您的字体是否已加载。可能存在路径问题，例如 font/ 文件夹而不是 fonts/
4. 看看你的.htaccess。人们经常制定影响资产的严格规则。
5. 如果一切正常，请尝试重新下载字体（字体文件可能已损坏）