我的 Foundation 图标在 Firefox 中不起作用。仅显示框中的字母答案

【问题标题】：My Foundation Icons are not working in Firefox. Only letters in a box display instead我的 Foundation 图标在 Firefox 中不起作用。仅显示框中的字母
【发布时间】：2017-04-24 05:55:45
【问题描述】：

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，因此我肯定正确链接到该文件。

我已经完全复制了基础图标文件夹并且没有删除任何东西。它看起来像这样：

./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 中也可以正常工作。

【问题讨论】：

你能做个小提琴吗？

标签： firefox zurb-foundation foundation-icon-fonts

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

首先纠正这个：

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

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

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

【讨论】：

是的。就像我说的那样，我从 firefox 中导航到实际的 css 文件以检查它是否有效。我刚刚检查了一个绝对路径，它是同样的交易。此外，由于图标在 Chromium 中呈现，我可以假设所有路径都是正确的。