0

我正在尝试使用 FA v4.7 来显示一些图标。我无法使用 CDN，因为我正在构建一个无法访问网络外部的 Intranet 站点。我将 .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>

有人有什么建议吗？

4

3 回答 3

0

就我个人而言，我不会使用 @font-face 直接链接到页面头部的字体真棒文件，然后像这样包含 css 文件：

<link href="/css/font-awesome.min.css" rel="stylesheet">
于 2016-11-02T20:06:57.440 回答
0

我有同样的问题。

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

凭直觉，我决定删除使浏览器下载.woff2文件的部分font-awesome.css，然后……突然所有图标都出现了！

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

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

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
于 2017-02-09T16:28:39.487 回答
0

您可以像往常一样使用链接下载整个字体真棒并在您的项目中使用它

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

无需手动创建

你<i class="fa fa-print"> FA font</i>会工作得很好

于 2016-11-02T20:00:43.433 回答