为什么我的Font Awesome图标显示为空白方块？

So you've decide to use Font Awesome for some great scalable icons. You download them, maybe you use the Bootstrap CDN.

因此，您已决定将Font Awesome用于一些出色的可扩展图标。 您可以下载它们，也可以使用Bootstrap CDN。

• You're not an idiot, but you only get black squares.
  你不是白痴，但是你只会得到黑色方块。
• You look at the F12 Developer Tools and you can see the fonts are getting downloaded.
  您查看F12开发人员工具，可以看到字体正在下载。
• You're super advanced, so you check that mime/types are correct on your web server and confirm them in the HTTP headers.
  您是高级用户，因此请检查Web服务器上的mime /类型是否正确，并在HTTP标头中进行确认。
• You've burned a half hour just pressing CTRL-F5 and clearing browser caches.
  仅按CTRL-F5并清除浏览器缓存，您已经花费了半小时。
• You're about to smack someone.
  你要去打人。
• You're trying different browsers, checking the wire, reading the docs, googling with bing for crying out loud.
  您正在尝试使用其他浏览器，检查线路，阅读文档，使用bing搜索大声喊叫。

Sigh.

叹。

Then you realize that you need to have class="fa" as well as whatever the icon's class is.

然后，您意识到您需要具有class =“ fa”以及图标的类别。

So, not just

所以，不只是

<i class="fa-pencil" title="Edit"></i>

But in fact, you need

但实际上，您需要

<i class="fa fa-pencil" title="Edit"></i> 

Then...it works.

然后...有效。

I hereby declare this the Foux du Fa Fa rule of Font Awesome and blog it so I don't forget.

我特此声明“ Font Awesome”的“ Fuux du Fa Fa”规则并将其写博客，因此我不会忘记。

Sponsor: Big thanks to Telerik Icenium for sponsoring the feed this week! Build and publish iOS & Android apps with Visual Studio using only HTML5 & JavaScript! Telerik Icenium now includes Visual Studio integration. Start a 30 day trial with support now!

赞助商：非常感谢Telerik Icenium本周赞助了此提要！ 仅使用HTML5和JavaScript使用Visual Studio构建和发布iOS和Android应用程序！ Telerik Icenium现在包括Visual Studio集成。 立即开始获得支持的30天试用！

翻译自: https://www.hanselman.com/blog/why-do-my-font-awesome-icons-show-up-as-blank-squares