Question

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

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

好吧，我检查了Page2的控制台，这是我发现的：

可下载字体：下载失败（font-family：“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
<小时/>      可下载的字体：下载失败（font-family：“FontAwesome”样式：正常权重：正常拉伸：正常src索引：2）：错误的URI或跨站点访问不允许来源：file：/// D：/ My Files / DIST / fontawesome-4.4.0 /字体/ fontawesome-webfont.woff？v = 4.4.0   font-awesome.min.css:4:14         可下载的字体：下载失败（font-family：“FontAwesome”样式：正常权重：正常拉伸：正常src索引：3）：错误的URI或跨站点访问不允许来源：file：/// D：/ My Files / DIST / fontawesome-4.4.0 /字体/ fontawesome-webfont.ttf？v = 4.4.0   font-awesome.min.css:4:14         可下载的字体：找不到支持的格式（font-family：“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=""部分，图标按预期工作。

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

先谢谢！：）

Answer 1

由于缺少字体，正方形显示出来。当您检查第2页控制台时，也会显示此信息。

正如@maraca和@Herm建议的那样，您需要一台服务器才能访问字体文件。这是因为解释.woff文件需要MIME type header。有关此内容的更多信息，请访问：Mime type for WOFF fonts?

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

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

python（版本3 +）

$ python -m http.server

python（版本2 +）

$ python -m SimpleHttpServer

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

-

这不是由normalize.css引起的问题。只有当它覆盖font-family时，它才能由另一个样式表引起。但你的情况似乎是一个标题问题。

Answer 2

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

我尝试做了几件事，最后我发现如果我改变字体大小，它会强制浏览器重绘正确显示它们的图标。

这段代码将通过在其大小上添加0.01“单位”来更改每个.fa元素的字体大小。

<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>

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

2 个答案:

python（版本3 +）

python（版本2 +）