我的基础图标在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问题，我可能无法修复。

基础图标附带的preview.html文件也可以在我的Firefox中正常使用。

Answer 1

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

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

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

Answer 2

首先纠正这个：

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

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

这是一条相对的道路。你确定＆＃39;静态＆＃39;您的浏览器可以访问该文件夹吗？