如何在 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 运行 build 我从任务运行ner gulp 得到以下错误:

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

有人可以帮助我吗？

此致

阿罗

Answer 1

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

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

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

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

How adding Foundation icons using SASS in Foundation Email

css

email

node.js

zurb-foundation