Font-Awesome不显示字体？

Question

我正在尝试使用FA v4.7来显示一些图标。 我无法使用CDN，因为我正在构建一个内部网络站点，该站点无法访问网络外部。 我将.css文件复制到了Content文件夹中，并将字体复制到了站点根目录中的目录中。

我将.css添加到了我的MVC项目中的捆绑包中。 现在，我获得了不同FA图标的智能感知。 但是，当我浏览该站点时，我的示例图标没有显示。

我使用开发人员工具查看了该页面，没有任何错误。 我编辑了.css文件，并替换了字体URL以使用“〜”而不是“ ..”，但这没有用。

@font-face {
  font-family: 'FontAwesome';
  src: url('~/fonts/fontawesome-webfont.eot?v=4.7.0');

我这样做是因为我的.css文件位于root\\Content\\font-awesome.css ，而字体位于root \\ fonts \\文件夹中。 使用波浪号应确保其使用根目录，然后使用\\fonts\\目录。

仍然没有错误，图标应位于没有黑色正方形的位置。 它只是不显示图标。 在开发人员工具中，我可以看到看起来正确的语法。 <i class="fa fa-print"> FA font</i>

有人有什么建议吗？

Answer 1

您可以像平常一样使用链接下载整个字体，并在项目中使用它

这是下载链接： http : //fontawesome.io/assets/font-awesome-4.7.0.zip

无需手动创建

您的<i class="fa fa-print"> FA font</i>可以正常工作

Answer 2

我个人不会使用@ font-face只是直接链接到页面顶部的字体真棒文件，然后再添加css文件，如下所示：

<link href="/css/font-awesome.min.css" rel="stylesheet">

Answer 3

我有同样的问题。

当我在Chrome中检查“网络”标签时，看到一个.woff2文件已下载。 某些Web服务器没有.woff2的mime类型，但是http状态为200，所以这不是问题。

.woff2预感，我决定删除使浏览器下载font-awesome.css的.woff2文件font-awesome.css ，然后...突然出现所有图标！

显然， .woff2文件或浏览器有问题（我使用的是Google Chrome 56）。

但是，作为临时解决方法，您可以从font-awesome.css删除此部分：

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),