我一直在使用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图标？
更新
我发现\f071及其朋友实际上是指代存储在字体文件中的图标的符号。它们显示为空白方块的事实似乎表明该字体尚未成功加载。
但是，我检查过，客户端下载fonts/fontawesome-webfont.woff和fonts/fontawesome-webfont.ttf就好了。
此外，通过fa类正确设置元素的字体：
font-family: normal normal normal 14px/1 FontAwesome
确保字体成功加载还需要什么？
更新
我解决了：字体文件已损坏/未正确传送。这总是首先要检查的东西！
答案 0 :(得分：7)
FontAwesome是...... 一个字体！
这意味着您将拥有一组字符，这些字符是（可视）图标。这些字符通常包含在\e000和\f8ff之间（private use area个字符）。
当您看到此代码时：
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
这意味着{-1}} 字符将显示在伪元素中。它与此代码相结合，为\f071元素加载FontAwesome字体：
.fa看到白色方块可能意味着：
@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;
}
）@font-face {}）如何调试：
font: normal normal normal 14px/1 FontAwesome;）.fa .fa-foo文件夹而不是font/ fonts/。人们经常制定影响资产的强有力的规则。