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 @import
in meinem Sass-Projekt verwenden kann. Ich verwende auch http://middlemanapp.com/ , um Sass in Css zu konvertieren . Fragen:
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
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.
css
sass
font-awesome
HP.
quelle
quelle
Antworten:
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.
quelle
Fontello ist sehr gut, aber IcoMoon ist noch großartiger.
quelle
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!
quelle
Ich verwende WENIGER und nicht SASS, daher müssen Sie möglicherweise Ihre Implementierung anpassen.
Umgebung:
Verwenden Sie diese Option, um die Liste der benötigten Unicode-Zeichennummern zu erstellen:
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:
Sie müssen
less/font-awesome/icons.less
die Ausgabe von grep öffnen und in die Datei einfügen.quelle
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@extend
die klassenfantastischen Klassen.Persönlich mache ich das und verwende die Klassen im Markup nicht wirklich, sondern nur Selektoren für die relevanten Elemente und
@extend
diese mit diesen Klassen.Beispiel:
Dann in deinem scss
Et voila.
quelle
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.
quelle
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/
quelle