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

Question

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

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

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

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0 font-awesome.min.css:4:14

---

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0 font-awesome.min.css:4:14

---

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0 font-awesome.min.css:4:14

---

downloadable font: no supported format found (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:5) source: (end of source list)

使用 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 相同的文件夹中，编辑了 <link href="" Page2 的部分，图标按预期工作。

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

---

• 提前致谢! :)

Answer 1

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

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

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

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

python (版本 3+)

$ python -m http.server

python (版本 2+)

$ python -m SimpleHttpServer

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

--

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