Schriftart optimieren Genial für nur verwendete Klassen

86

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.

HP.
quelle
csslint hilft dabei, die nicht verwendeten Klassen zu finden, sodass Sie dies zumindest nicht manuell tun müssen. automatisieren ... Sie müssten sich wahrscheinlich selbst implementieren, aber es ist auch auf Github, damit Sie Ihre eigenen rollen können
Albert
2
Wie soll Sass wissen, welche Klassen Sie verwenden? Diese Website kann benutzerdefinierte Schriftdateien aus einer Reihe von Symbolschriftarten
generieren
@cimmanon warum postest du deine Antwort nicht unten und ich werde sie akzeptieren? Ich habe fontello.com verwendet und es war das, wonach ich gesucht habe.
HP.

Antworten:

89

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.

Cimmanon
quelle
fontello ändert den Klassennamen der Symbole automatisch - gibt es eine Möglichkeit, dies zu vermeiden?
Adam
Fontello hat einige fehlende Symbole. No React, JavaScript, Node.js, Java zum Beispiel
Green
44

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

TasDiam
quelle
1
Mit IcoMoon können Sie Ihre eigene Schriftart importieren. Fontello nicht
jscripter
1
Ich habe festgestellt, dass IcoMoon nur eine Teilmenge der Font Awesome-Symbole unterstützt.
Tony O'Hagan
1
@ TonyO'Hagan Vielleicht können Sie eine Font Awesome-Schriftdatei aus Ihrem lokalen Dateisystem importieren.
L_K
IcoMoon hat fehlende Symbole. No React, JavaScript, Node.js zum Beispiel
Green
2
Nur zu Ihrer Information, aber wenn Font Awesome-Symbole in IcoMoon importiert werden, sind einige der Symbole möglicherweise nicht immer zentriert. Dies scheint eher ein Problem mit der Schriftartdatei als mit IcoMoon zu sein, denn wenn Sie die Font Awesome-Schriftartdatei in Inkscape öffnen, können Sie dies sehen Einige der Symbole sind falsch ausgerichtet (obwohl sie bei der Ausgabe an den Browser korrekt angezeigt werden). Die Lösung scheint darin zu bestehen, die Glyphenbearbeitungssteuerelemente von IcoMoon zu verwenden, um die Leinwandbreite zu verringern und das Symbol zu zentrieren.
Noel Whitemore
11

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!

Nickhar
quelle
7
Ich weiß nicht, ob sich dieses Tool als offiziell qualifizieren würde
Alex W
6

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.

Michelle Tsacheva
quelle
2

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.

designermonkey
quelle
2

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.

mp31415
quelle
Fontastic erfordert, dass Sie sich im Voraus registrieren, um etwas zu demonstrieren
Green
Soweit ich mich erinnere, war das vor einem Jahr nicht der Fall. Traurig.
mp31415
1
Verwenden Sie einfach mailinator , um dort ein Konto zu erstellen. Es funktionierte perfekt für den Export der Symbole.
ppires
0

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/

guru_laghima
quelle