Wordpress
Kati Pierson
Sonntag, den 03. Januar 2016 um 10:00 Uhr

WordPress-Themes mit Font Awesome ausrüsten

Font Awesome ist eine Icon-Schrift. Das Paket enthält 605 Icons für die eigene Website. Da Bootstrap 4 keine Glyphicons mehr bietet, empfiehlt sich Font Awesome.

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.

Verwandte Beiträge

Timber: WordPress mit TWIG-Engine WordPress hat viele Vorteile keine Frage, doch leider besitzt es immer noch keine Template-Engine. Mit dem Plugin "Timber" wird dieses Problem gelöst....
WordPress SEO by Yoast: Leere Tags in der Sitemap anzeigen Viele Websites setzen für die Suchmaschinenoptimierung (SEO) das Plugin "WordPress SEO by Yoast", hat man jedoch seine Schlagwortseiten mit Custom Fie...
WordPress: Bilder immer auf die Anhangseite verlinken WordPress ist ein schönes und einfaches Blogsystem, trotzdem sind viele Handgriffe immer und immer wider zu tun. So auch das Verlinken der Bilder im T...