css - 如何在 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” 出错时( native ) [00:11:11] 以下任务未完成:默认、构建、内联 [00:11:11] 您是否忘记了发出异步完成信号？

有人可以帮助我吗？

最好的问候

阿罗

Answer 1

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

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

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