Font-Awesome in WordPress ohne Anpassung der Theme einbauen

Um auf Webseiten Icon’s nutzen zu können, können eigens Icon Bilder erzeugt werden – entweder einzeln oder als Iconset oder aber als Font, welche mit der Seite geladen wird. Die Einbindung per Font macht es dem Web-Entwickler relativ leicht, weil er anstelle der Icon Dateinamen nur die jeweiligen CSS Klassen kennen muss. Ausserdem gestaltet sich der HTML Code übersichtlicher.

Font-Awesome ist eine freie Icon Schrift, welche über das BootstrapCDN geladen werden kann.

WP Plugin zum CSS einbinden, ohne Theme Anpassung
Problem: Sollte die WordPress Installation mit einem Standard Theme oder einem gekauftem Premium Theme betrieben werden, so werden diese Themes in regelmäßigen Abständen aktualisiert. Diese Aktualisierung führt dazu das jegliche Code Anpassungen, welche direkt im Theme Code gemacht wurden verloren gehen.
Lösung: WordPress Plugin Simple Custom CSS verwenden. Dadurch können alle CSS Anpassungen ausserhalb des eigentlichen Theme Codes gemacht werden, so dass es bei Updates der Theme nicht zu Problemen kommt.

Font-Awesome kann auch direkt in das WP Theme eingebunden werden, dazu gibt es eine Anleitung auf der Font-Awesome Seite: http://fontawesome.io/get-started/

Einbinden via CSS
Nachdem das WordPress Plugin Simple Custom CSS erfolgreich installiert wurde, kann es unter dem Menüpunkt „Design“ => „Custom CSS“ aufgerufen werden.

Anschließend muss nur folgender CSS Code eingefügt werden und schon wird bei jedem Aufruf der Webseite die Font-Awesome geladen.

Icon anzeigen
Dazu einfach folgende HTML Tags mit CSS Classes in den HTML Code einbauen.

Die Icons sollten, wie folgt angezeigt werden:


Eine vollständige Liste aller Font-Awesome Icons gibt es hier:
http://fontawesome.io/icons/


Font-Awesome Lizenz
Font Awesome ist OpenSource und ist „GPL friendly“. Font-Awesome kann für kommerzielle, Open Source und andere Projekte genutzt werden.
Lizenzdetails: http://fontawesome.io/license/

(Visited 239 times, 1 visits today)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.