/ / Comment l'ajout d'icônes Foundation à l'aide de SASS dans Foundation Email - css, node.js, email, zurb-foundation

Comment l'ajout d'icônes Foundation à l'aide de SASS dans Foundation Email - css, node.js, email, zurb-foundation

J'utilise zerb Foundation pour Email et je veux utiliser les icônes Foundation dans mon projet. Je suis nouveau en scss et j'ai essayé de suivre les instructions de ce qui suit site mais je ne le fais pas fonctionner correctement.

J'ai créé un dossier de polices dans mon répertoire racine (en dehors de src) et j'ai ajouté le code suivant comme décrit dans mon fichier 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";

Dans ma page, j'ai ajouté pour tester une icône mais elle n'a pas rendu l'icône.

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

Quand je lance la commande npm run build Je reçois l'erreur suivante de la part du gestionnaire de tâches:

Erreur de rejet non gérée: ENOENT: pas de tel fichier ou répertoire, ouvrez "C: Usersaroaro_devemailfounddistfontfoundation-iconsfoundation-icons.css" en erreur (natif) [00:11:11] Les tâches suivantes ne sont pas terminées: default, build, inline [00:11:11] Avez-vous oublié de signaler l'achèvement asynchrone?

Est-ce que quelqu'un peut m'aider?

Meilleures salutations

Aro

Réponses:

0 pour la réponse № 1

Par défaut le scss version de email de fondation n'incluez pas les polices d'icônes, car les polices d'icônes ne sont pas prises en charge dans la plupart des clients de messagerie.

Mais si vous avez ajouté vos propres polices d’icône ou importé les polices de base depuis sites de fondation change ton $font-path: variable pour désigner le chemin correct des polices par rapport à votre fichier css.

Au lieu d'utiliser des polices d'icônes, utilisez des images png ou jpg pour vos icônes.