/ / Як додавати піктограми фонду за допомогою SASS в Foundation Email - css, node.js, електронна пошта, zurb-foundation

Як додавати піктограми фонду за допомогою SASS в Foundation Email - css, node.js, email, zurb-foundation

Я використовую Foundation Zerb для Email, і я хочу використовувати значки Foundation в моєму проекті. Я новачок в 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: Usersaroaro_devemailfounddistfontfoundation-iconsfoundation-icons.css" при помилці (рідній) [00:11:11] Не виконані наступні завдання: за замовчуванням, збірка, вбудований [00:11:11] Ви забули сигнал завершення асинхронного повідомлення?

Чи може хто-небудь допомогти мені?

З найкращими побажаннями

Аро

Відповіді:

0 для відповіді № 1

За умовчанням СЦС версія фундамент-електронна пошта не включайте шрифти значків, оскільки шрифти значків не підтримуються більшістю клієнтів електронної пошти.

Але якщо ви додали свої власні шрифти іконок або імпортували шрифти фонду з фонди-сайти змінити свій $font-path: змінної, щоб вказати правильний шлях шрифтів відносно css-файлу.

Замість використання шрифтів іконки використовуйте png або jpg зображення для ваших значків.