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

WordPress: E-Mail-Adresse und Absender bei automatischen E-Mails ändern Frische Wordpress-Installation. Das gewünschte Theme ist installiert. Die ersten Artikel sind geschrieben. Kommentare folgen und erste Anmeldungen auc...
WordPress: Advanced Custom Fields (ACF) via PHP & JSON erstellen Advanced Custom Fields (ACF) ist ein geniales Plugin zum Erstellen von Custom Fields in Wordpress. Es bietet viele Möglichkeiten und ist auch in Timbe...
WordPress: Attachment- und Medien-Seiten mit Permalink Für meine Bilder- und Attachemnt-Seiten einer anderen Wordpress-Installation wollte ich eine bestimmt URL haben. Einen Speaking-Name, einen Pretty Per...