My Foundation 图标在 Firefox 中不工作。只显示框中的字母

Question

Html

<link rel=stylesheet href=../static/css/foundation-icons/foundation-icons.css>

<a class="button radius search-header"><i class="fi-magnifying-glass"></i> Search</a>

我在 Firefox 中按 Ctrl+U 后导航到 foundation-icons。css 所以我肯定正确链接到文件。

我已经准确复制了 foundation-icons 文件夹，没有删除任何内容。它看起来像这样：

./static/css/foundation-icons/
 - foundation-icons.css
 - foundation-icons.eot
 - foundation-icons.svg
 - foundation-icons.ttf
 - foundation-icons.woff
 - svgs/*
 - preview.html

编辑：我更改了标题并添加了 Firefox 标签，因为在 Chromium 中似乎一切正常。我有点难过，因为这意味着这是一个 Firefox 问题，我可能无法修复。

foundation-icons 附带的 preview.html 文件在我的 Firefox 中也能正常工作。

Answer 1

首先纠正这个：

<link rel="stylesheet" href="../static/css/foundation-icons/foundation-icons.css">

在 Foundation 示例中，Firefox 使用 .woff 个文件。检查您是否有权访问它们。

这是一个相对路径。您确定您的浏览器可以访问 'static' 文件夹吗？

Answer 2

如果您使用 SCSS 文件，您应该将 $fi-path 变量指向 foundation-icon-fonts 文件夹的正确位置。

对我来说，我必须在导入之前添加以下内容 foundation-icon-fonts：

$fi-path: 'foundation-icon-fonts';

My Foundation 图标在 Firefox 中不工作。只显示框中的字母

My Foundation Icons are not working in Firefox. Only letters in a box display instead

firefox

zurb-foundation

foundation-icon-fonts