Schriftart optimieren Genial für nur verwendete Klassen

Ich verwende die Font Awesome Sass-Datei https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass , um sie zu _font-awesome.sass zu machen, damit ich sie @importin meinem Sass-Projekt verwenden kann. Ich verwende auch http://middlemanapp.com/ , um Sass in Css zu konvertieren . Fragen:

1. Gibt es eine Möglichkeit, nur verwendete Symbolklassen in meine konvertierte CSS-Datei zu integrieren? Weil es im Moment alle Klassen von _font-awesome.sass trug

2. BONUS: Ist es möglich, die Schriftarten irgendwie mit verwendeten Symbolklassen neu zu kompilieren , um sie bei der Verwendung in der Produktion zu verkleinern?

Wenn ich oben ein paar Tipps zu Nummer 1 bekommen kann, wäre das großartig genug.

Vielen Dank.

Sass hat keine Ahnung, welche Klassen Sie tatsächlich verwenden. Dies ist etwas, das Sie manuell reduzieren müssen. Öffnen Sie die bereitgestellte .scss-Datei und hacken Sie alles aus, was Sie nicht benötigen.

Das Bearbeiten der Schriftartdatei selbst, um nicht benötigte Glyphen zu entfernen, erfordert eine Drittanbieteranwendung und geht über den Rahmen dieser Frage hinaus.

Fontello ist ein Online-Webdienst, der all dies für Sie erledigen kann. Sie können mehrere Symbolschriftartensammlungen mischen und anpassen, um die perfekte Schriftartdatei für Ihr Projekt zu erstellen. Zusätzlich zur angepassten Schriftartdatei werden mehrere CSS-Dateien bereitgestellt, die bereits für Sie generierte Stile enthalten. Wenn Sie die Erweiterung in CSS ändern, können Sie sie in Ihr vorhandenes Sass-Projekt importieren.

Fontello ist sehr gut, aber IcoMoon ist noch großartiger.

Sie können jetzt Symbole von Font-awesome für die Produktion unterteilen. Es gibt jetzt ein offizielles Teilmengen-Tool namens icnfnt , mit dem Sie genau die Symbole auswählen und verpacken können, die Sie aus der aktuellen Version von Font-awesome (v3.0.2) benötigen.

Der benutzerdefinierte Download enthält auch alle CSS-, WENIGER-, SCSS- und SASS-Codes!

Ich verwende WENIGER und nicht SASS, daher müssen Sie möglicherweise Ihre Implementierung anpassen.

Umgebung:

• Font awesome 4.5.0 (aktuelle Version)
• Ubuntu 14.04 LTS
• Bash

Verwenden Sie diese Option, um die Liste der benötigten Unicode-Zeichennummern zu erstellen:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

Sie verwenden dies dann mit FontSquirrel im Expertenmodus, in dem Sie eine benutzerdefinierte Teilmenge auswählen: http://www.fontsquirrel.com/tools/webfont-generator

Geben Sie in Unicode-Bereichen die durch Kommas getrennten Werte von oben ein.

So entfernen Sie unnötiges Material aus dem CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

Sie müssen less/font-awesome/icons.lessdie Ausgabe von grep öffnen und in die Datei einfügen.

Nun, der Sass kann sicherlich ein wenig gewackelt werden, um die Selektoren %so zu machen , dass sie nur erweiterbar sind. Sobald dies erledigt ist, können Klassen so erstellt werden, dass sie mit den gewünschten Symbolen übereinstimmen, und dann können @extenddie klassenfantastischen Klassen.

Persönlich mache ich das und verwende die Klassen im Markup nicht wirklich, sondern nur Selektoren für die relevanten Elemente und @extenddiese mit diesen Klassen.

Beispiel:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

Dann in deinem scss

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voila.

Fontastic hat bei mir funktioniert (es wurde auf der Gontub-Seite von Font Awesome aufgeführt ). Wählen Sie die benötigten Glyphen aus und laden Sie sie als neue benutzerdefinierte Schriftart herunter. Hervorragendes Werkzeug.

Iconmoon hat für mich gearbeitet. Ich habe es verwendet, indem ich die SVG-Datei von font-awesome importiert habe, um sicherzustellen, dass ich die gewünschten Symbole erhalte und nicht nur die auf ihrer Website verfügbaren. Auch dieser Link half mir bei der Integration der neuen Symbole https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/