Foundation 6菜单图标无法显示问题排查求助

看起来你踩了Foundation 6的一个常见坑——Foundation 6默认不自带Foundation Icons图标库，你用的fi-list这类图标类属于这个独立的图标库，所以光加菜单的SCSS混入是没用的，得单独安装并配置图标库才行。

下面是一步步的解决方法：

1. 安装Foundation Icons库 #

如果你用Bower管理依赖，在项目根目录执行：

bower install foundation-icons --save

如果是用npm的话：

npm install foundation-icons --save

2. 在SCSS中引入图标样式 #

打开你的app.scss，在最顶部添加图标库的SCSS引入（路径要根据你的依赖安装位置调整）：

// 引入Foundation Icons的样式文件（Bower路径示例）
@import '../bower_components/foundation-icons/foundation-icons';

// 再引入Foundation的核心样式
@import 'foundation';

// 你的自定义SCSS代码（包括之前的菜单mixins）放在这里

如果是npm安装的，路径改成../node_modules/foundation-icons/foundation-icons即可。

3. 确保字体文件路径正确 #

图标显示成方块最常见的原因是字体文件找不到。你可以在app.scss里重新定义图标库的字体路径变量，覆盖默认值：

// 先定义字体路径，再引入图标SCSS
$fi-font-path: "../bower_components/foundation-icons/fonts" !default;
@import '../bower_components/foundation-icons/foundation-icons';

这个路径要指向你项目中foundation-icons/fonts目录的实际位置，确保编译后的CSS里字体文件的URL是正确的。

为什么你之前的SCSS代码无效？ #

你添加的@include menu-base、@include menu-icons这些混入，只是用来控制Foundation菜单组件的布局、对齐、图标位置等样式的——它们不负责提供图标本身，图标是需要单独引入的字体库来支持的，所以这些混入无法解决图标不显示的问题。

最后检查 #

• 编译你的SCSS生成新的app.css，确保页面正确加载了这个文件。
• 打开浏览器控制台，查看有没有404错误（如果字体文件路径错了，会在这里显示）。

内容的提问来源于stack exchange，提问作者belgoros