FontAwesome显示方块，而不是图标

Question

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

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

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

可下载字体：下载失败（font-family：“fontawesome”样式：正常重量：正常拉伸：正常src索引：1）：URI错误或不允许跨站点访问源：file：///d:/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2？v=4.4.0font-awesome.min.css:4:14

null

使用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位于同一级别的文件夹中：

Page1:我的文件/page1.html

Page2:我的文件/Includes/page2.html

...和我的CSS文件：我的文件/dist/（CSS文件）

现在，我将Page2与Page1放在同一文件夹中，编辑了Page2的 部分，图标按预期工作。

这里会有什么问题？...

• 谢谢，提前！：）




Answer 1

由于缺少字体，方块会出现。当您检查第2页控制台时也会出现这种情况。

正如@maraca和@herm所建议的，您需要一个服务器来访问字体文件。这是因为需要MIME类型头来解释.woff文件。这里有更多关于这个的信息：WOFF字体的Mime类型？

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

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

$ python -m http.server

$ python -m SimpleHttpServer

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

--

不，这不是normalize.css引起的问题。只有当另一个样式表重写了font-family时，它才能由它引起。但你的案子似乎是个标题问题。