Mit dem CSS-Präprozessor wird die Erstellung von CSS-Dateien erleichtert. Bootstrap ist in der der neusten…
WordPress-Themes mit Font Awesome ausrüsten
Tja, jetzt ist Bootstrap 4 im neuen Projekt eingebaut, doch uns fehlen die Icons für die Buttons, Links und vieles mehr. In Bootstrap 4 wurden die Glyphicons entfernt. Die Glyphicons sind zwar die größte Sammlung an Icons in einer Schrift, aber leider auch kostenpflichtig.
Font Awesome und andere Alternativen
Font Awesome (https://fortawesome.github.io/Font-Awesome/) ist eine umfangreiche kostenfreie Alternative. Sie hat auch gleich SCSS-Files zum Einbinden in Bootstrap. Deshalb ist es unsere bevorzugte Variante. 605 Icons stehen zur Verfügung.
Octicons (https://octicons.github.com/) ist eine weitere Variante. Jedoch mit weniger Icons, dafür sind diese teilweise ansprechender. Hier gibt es ebenfalls eine SCSS-Datei zum Einbinden in Bootstrap. Die Anzahl der Icons steht nirgends auf der Website.
IcoMoon (https://icomoon.io/#icons-icomoon) ist eine weitere Alternative. Mit 490 Fonts in der Free-Variante ist auch dies eine gute Lösung. Hier fehlen jedoch die unterschiedlichen Schrift-Formate und auch eine SCSS-Datei. 1600 Icons hat die Premium-Edition.
Linearicons (https://linearicons.com/free) hat ebenfalls eine Free-Version. 170 Icons stehen zur Verfügung. 1001 Icons hat die Premium-Version. Die Schriftart kann via JavaScript und CSS in bestehende Seiten eingebunden werden. Außerdem wird sie in allen gängigen Schriftformaten geliefert.
Eine Mischung aus allem lässt sich auf der Website: http://weloveiconfonts.com/ finden. Dort kann man sich ein Icon-Set aus diversen unterschiedlichen Set zusammenstellen und in die eigene SCSS-Datei via API einbinden.
Wer es minimalistisch und individuell mag, der kann Fontastic.me nutzen. Einfach die Icons zusammenstellen, die benötigt werden und inkl. CSS-Datei alle herunterladen.
Mehr Alternativen hat T3N gesammelt: http://t3n.de/news/10-kostenlose-icon-fonts-450651/
Font Awesome ins WordPress-Theme einbinden
Die ZIP-Datei mit allem Zubehör ist heruntergeladen und entpackt. Die Dateien aus dem Ordner „fonts“ werden in den Theme-Ordner „fonts/awesome/“ kopiert. Die Dateien aus dem Ordner „scss“ werden in den Theme-Ordner „sass/awesome/“ kopiert. Nur die Datei „font-awesome.scss“ wird umbenannt in „_font-awesome.scss“ und in den Ordner „sass“ verschoben.
Anschließend wird der Pfad bei den Imports korrigiert.
@import "awesome/variables"; @import "awesome/mixins"; @import "awesome/path"; @import "awesome/core"; @import "awesome/larger"; @import "awesome/fixed-width"; @import "awesome/list"; @import "awesome/bordered-pulled"; @import "awesome/animated"; @import "awesome/rotated-flipped"; @import "awesome/stacked"; @import "awesome/icons";
Außerdem muss der Pfad zu den Font-Dateien in der „_variables.scss“ korrigiert werden. Im Original sieht diese Zeile so aus:
$fa-font-path: "../fonts" !default;
Das wird geändert in:
$fa-font-path: "/wp-content/themes/mytheme/fonts/awesome/" !default;
Zum Ende muss diese neue Datei noch in die „styles.scss“ importiert werden. Dazu fügen wir am Ende folgende Zeile hinzu:
/* FontAwesom importieren */ @import "font-awesome";
Jetzt sollten die Icons aus Font Awesome verfügbar sein.