如何在基金会电子邮件中使用 SASS 添加基金会图标

Question

我正在使用基金会 zerb 用于电子邮件，我想在我的项目中使用基金会图标。我是 scss 的新手，我试图按照以下站点的说明进行操作，但我无法使其正常运行。

我在根目录(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

默认情况下，基金会电子邮件的scss版本不包括图标字体，因为大多数电子邮件客户端不支持图标字体。

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

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