如何在 Foundation Email 中使用 SASS 添加 Foundation 图标

Question

我正在为电子邮件使用 Foundation zerb，我想在我的项目中使用 Foundation 图标。我是 scss 的新手，我尝试按照以下 site 的说明进行操作，但我无法正常运行。

我在我的根目录（在 src 之外）创建了一个字体文件夹，并按照我的 app.scss 文件中的说明添加了以下代码：

enter code here
$font-path: "../fonts/foundation-icons/foundation-icons";
@font-face {
  font-family: "foundation-icons";
  src: url("#{$font-path}.eot");
  src: url("#{$font-path}.eot?#iefix") format("embedded-opentype"),
       url("#{$font-path}.woff") format("woff"),
       url("#{$font-path}.ttf") format("truetype"),
       url("#{$font-path}.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

@import "../fonts/foundation-icons/foundation-icons.css";

在我的页面中，我添加了用于测试一个图标，但它没有呈现图标。

<i class="fi-social-linkedin">linkedIn</i>

当我运行命令 npm run build 时，我从任务运行器 gulp 中收到以下错误：

未处理的拒绝错误：ENOENT：没有这样的文件或目录，打开 'C:\Users\aro\aro_dev\emailfound\dist\font\foundation-icons\foundation-icons.css' 在错误（本机） [00:11:11] 以下任务未完成：默认、构建、内联 [00:11:11] 您是否忘记发出异步完成信号？

有人可以帮我吗？

最好的问候

阿罗

Answer 1

默认情况下，foundation-email 的 scss 版本不包含图标字体，因为大多数电子邮件客户端都不支持图标字体。

但是，如果您添加了自己的图标字体，或者从 foundation-sites 导入了基础字体，请更改您的 $font-path: 变量以指向相对于您的 css 文件的正确字体路径。

不要使用图标字体，而是使用 png 或 jpg 图像作为图标。