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

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

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

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

Sigh.

叹。

Then you realize that you need to have class&＃61;"fa" as well as whatever the icon&＃39;s class is.

然后&＃xff0c;您意识到您需要具有class &＃61;“ fa”以及图标的类别。

So, not just

所以&＃xff0c;不只是

But in fact, you need

但实际上&＃xff0c;您需要

Then...it works.

然后...有效。

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

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

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!

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

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