/ / Come aggiungere icone Foundation utilizzando SASS in Foundation Email - css, node.js, email, zurb-foundation

Come aggiungere icone Foundation usando SASS in Foundation Email - css, node.js, email, zurb-foundation

sto usando lo zerb di base per l'email e voglio usare le icone di base nel mio progetto. Sono nuovo in scss e ho provato a seguire le istruzioni di seguito luogo ma non lo faccio funzionare correttamente.

Ho creato una cartella di caratteri nella mia directory principale (al di fuori di src) e ho aggiunto il seguente codice come descritto nel mio file 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";

Nella mia pagina ho aggiunto per testare un'icona ma non ha reso l'icona.

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

Quando eseguo il comando npm esegue build ottengo il seguente errore dal task runner gulp:

Errore di rifiuto non gestito: ENOENT: nessun file o directory di questo tipo, apri "C: Usersaroaro_devemailfounddistfontfoundation-iconsfoundation-icons.css" ad errore (nativo) [00:11:11] Le seguenti attività non sono state completate: default, build, inline [00:11:11] Hai dimenticato di segnalare il completamento asincrono?

Qualcuno può aiutarmi?

I migliori saluti

Aro

risposte:

0 per risposta № 1

Di default il SCSS versione di fondazione-mail non includere font di icone, poiché i font di icone non sono supportati nella maggior parte dei client di posta elettronica.

Ma se hai aggiunto i tuoi font di icone o importati i font di base Fondazione siti cambia il tuo $font-path: variabile per puntare al percorso corretto dei caratteri relativi al tuo file css.

Invece di usare i font delle icone usa immagini png o jpg per le tue icone.