如何调试Font-Awesome图标？

Question

我一直在使用Font-Awesome及其图标一段时间,它一直工作得很好.

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

所以我想开始调试这个过程.一个例子是:

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

但是,在使用Chrome进行检查时,我无法在受影响元素的CSS中找到任何网址.我在每个图标元素上看到的是这样的:

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

\f071"空白方块"字符在哪里.

所以我的问题是:

图标来自哪里,如何调试未显示的FA图标？

UPDATE

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

但是,我检查了并且客户端下载fonts/fontawesome-webfont.woff并且fonts/fontawesome-webfont.ttf很好.

此外,通过fa类正确设置元素的字体:

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

还有什么必要确保,字体已成功加载？

UPDATE

我解决了它:字体文件已损坏/未正确传送.这总是首先要检查的东西!

Answer 1

FontAwesome是...... 一个字体!

这意味着您将拥有一组字符,这些字符是(可视)图标.这些字符通常包含在\e000和\f8ff(它们是私人使用区域的字符)之间.

当你看到这段代码时:

.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. 如果一切正常,请尝试重新下载字体(字体文件可能已损坏)