/ / Cómo agregar iconos de Fundación usando SASS en Foundation Email - css, node.js, email, zurb-foundation

Cómo agregar iconos de Fundación usando SASS en Foundation Email - css, node.js, email, zurb-foundation

Estoy usando Foundation zerb para correo electrónico y quiero usar los íconos de Foundation en mi proyecto. Soy nuevo en scss y traté de seguir las instrucciones de la siguiente sitio pero no lo hago funcionar correctamente.

Creé una carpeta de fuentes en mi directorio raíz (fuera de src) y agregué el siguiente código como se describe en mi archivo 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";

En mi página agregué para probar un ícono pero no me proporcionó el ícono.

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

Cuando ejecuto el comando npm ejecutar compilación Me sale el siguiente error del trago del corredor de tareas:

Error de rechazo no controlado: ENOENT: no hay tal archivo o directorio, abra "C: Usersaroaro_devemailfounddistfontfoundation-iconsfoundation-icons.css" en Error (nativo) [00:11:11] Las siguientes tareas no se completaron: predeterminado, compilación, en línea [00:11:11] ¿Olvidaste indicar la finalización asincrónica?

¿Alguien me puede ayudar?

Atentamente

Aro

Respuestas

0 para la respuesta № 1

Por defecto el scss versión de fundación-correo electrónico no incluya fuentes de iconos, ya que las fuentes de iconos no son compatibles con la mayoría de los clientes de correo electrónico.

Pero si ha agregado sus propias fuentes de íconos o ha importado las fuentes de los cimientos de sitios de fundación cambia tu $font-path: variable para apuntar a la ruta correcta de las fuentes en relación con su archivo css.

En lugar de utilizar fuentes de iconos, use imágenes png o jpg para sus iconos.