FontAwesome 显示正方形，而不是图标答案

【问题标题】：FontAwesome showing squares, not iconsFontAwesome 显示正方形，而不是图标
【发布时间】：2017-02-17 02:31:37
【问题描述】：

我的网页现在显示图标的方块，而不是图标本身。

我有相同的页面Page1.html（我将代码“复制粘贴”到Page2.html），Page2 显示的是正方形（里面有一些字符...），而不是图标。

嗯，我检查了Page2的控制台，发现是这样的：

可下载字体：下载失败（字体系列：“FontAwesome”样式：正常粗细：正常拉伸：正常 src 索引：1）：错误 URI 或不允许跨站点访问来源：file:///D:/我的文件/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0 font-awesome.min.css:4:14

可下载字体：下载失败（字体系列：“FontAwesome”样式：正常粗细：正常拉伸：正常 src 索引：2）：URI 错误或不允许跨站点访问来源：file:///D:/My Files/ dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0 font-awesome.min.css:4:14
可下载字体：下载失败（字体系列：“FontAwesome”样式：正常粗细：正常拉伸：正常 src 索引：3）：URI 错误或不允许跨站点访问来源：file:///D:/My Files/ dist/font-awesome-4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0 font-awesome.min.css:4:14
可下载字体：未找到支持的格式（字体系列：“FontAwesome”样式：正常粗细：正常拉伸：正常 src 索引：5）来源：（源列表末尾）

使用 FontAwesome 的代码示例：

<ul class="navbar-nav">
  <li>
    <a href="Home.html"><span class="fa fa-home"></span>Home</a>
  </li>
  ...
</ul>

我没有对任何 FontAwesome 文件进行任何修改。

这可能是normalize.css，还是网页中包含的任何其他样式表？

更新：

所以，Page2 位于与 Page1 同级的文件夹中：

第1页：My Files/Page1.html

第2页：My Files/includes/Page2.html

...和我的 CSS 文件：My Files/dist/ (CSS Files)

现在，我将 Page2 移动到与 Page1 相同的文件夹中，编辑了 Page2 的 <link href="" 部分，图标按预期工作。

这可能是什么问题？ ...

提前谢谢！ :)

【问题讨论】：

通常发生这种情况是因为 .woff2 扩展名不是由服务器作为文件提供的。所以是配置问题。
@maraca 是对的。您应该使用服务器。（例如）本地主机：3000
@maraca 如果这是从网络服务器运行的，这将是相关的，但错误消息使页面更有可能通过 file:// 协议查看。
两个页面是否在同一个文件夹中？我建议在您的问题中包含每个页面的头部标记。
请运行服务器！

标签： html css font-awesome

【解决方案1】：

显示方块是因为缺少字体。当您检查第 2 页控制台时，也会出现这种情况。

正如@maraca 和@Herm 所建议的，您需要一台服务器来访问字体文件。这是因为需要 MIME type header 来解释 .woff 文件。更多关于这里的信息：Mime type for WOFF fonts?

通过启动一个简单的服务器，将自动添加此 mime 类型并提供字体。

要启动服务器，可以使用 python ：

python（版本 3+）

$ python -m http.server

python（版本 2+）

$ python -m SimpleHttpServer

这将在当前目录中启动一个服务器。

不，这不是由 normalize.css 引起的问题。只有当它覆盖字体系列时，它才可能是由另一个样式表引起的。但是您的情况似乎是标题问题。

【讨论】：

【解决方案2】：

我遇到了同样的问题，字体已加载但仍然得到方块，它是随机发生的，因此很难重现。我检查并加载了字体，一些后来添加的图标正确显示。

我尝试了几件事，但最终发现如果我更改字体大小，它将强制浏览器重新绘制正确显示它们的图标。

这段代码将改变每个 .fa 元素的字体大小，将其大小增加 0.01 个“单位”。

<script>
// Enforce font redraw to avoid square icons 
$(document).ready(function(){
    setTimeout(function(){
        var els = $('.fa');
        for (var i=0; i<els.length; i++) {
            var fs = $(els[i]).css('font-size');
            var un = fs.replace(/[0-9\.]*/, '');
            var val = fs.match(/[0-9\.]*/)[0];
            fs = (fs.indexOf('.') > -1 ? val + '01' + un : val + '.01' + un);
            els[i].style.cssText = els[i].style.cssText + '; font-size: ' + fs + ' !important;';
        }
    }, 2000);
});
</script>

【讨论】：