/ / Wie Hinzufügen von Foundation Icons mit SASS in Foundation Email - css, node.js, email, zurb-foundation

So fügen Sie Foundation-Symbole mithilfe von SASS in Foundation Email hinzu - css, node.js, email, zurb-foundation

Ich benutze Foundation Zerb für E-Mail und ich möchte Foundation-Symbole in meinem Projekt verwenden. Ich bin neu in scss und ich habe versucht, den Anweisungen aus dem folgenden zu folgen Seite? ˅ aber ich bekomme es nicht richtig laufen.

Ich habe einen Font-Ordner in meinem Root-Verzeichnis (außerhalb von src) erstellt und den folgenden Code hinzugefügt, der in meiner app.scss-Datei beschrieben ist:

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";

In meiner Seite habe ich hinzugefügt, um ein Symbol zu testen, aber es hat das Symbol nicht gerendert.

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

Wenn ich den Befehl ausführe npm run build Ich bekomme den folgenden Fehler von der Task Runner Schluck:

Unbehandelte Ablehnung Fehler: ENOENT: keine solche Datei oder Verzeichnis, öffnen Sie "C: Usersaroaro_devemailfounddistfontfoundation-iconsfoundation-icons.css" bei Fehler (nativ) [00:11:11] Die folgenden Aufgaben wurden nicht abgeschlossen: Standard, Build, Inline [00:11:11] Hast du vergessen, asynchrone Vervollständigung zu signalisieren?

Kann mir jemand helfen?

Freundliche Grüße

Aro

Antworten:

0 für die Antwort № 1

Standardmäßig ist der scss Version von Gründungs-E-Mail Verwenden Sie keine Symbolschriftarten, da Symbolschriften in den meisten E-Mail-Clients nicht unterstützt werden.

Wenn Sie jedoch Ihre eigenen Symbolschriften hinzugefügt oder die Grundlagenschriften importiert haben Gründungsstätten ändere dein $font-path: Variable, um auf den korrekten Pfad der Schriftarten relativ zu Ihrer CSS-Datei zu zeigen.

Anstatt Icon-Fonts zu verwenden, verwenden Sie png- oder jpg-Bilder für Ihre Icons.