Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 27. September 2016

Icons für Alle: So nutzt du Font Awesome mit WordPress

Der Dr. Web Font Awesome WordPress Guide

Font Awesome ist einer der belieb­tes­ten Iconfonts welt­weit. Mittlerweile nut­zen über 60 Millionen Websites den Font, um Icons in allen Farben und Varianten dar­zu­stel­len. Unter die­sen 60 Millionen Websites sind unter ande­rem whitehouse.gov, thebeatles.com und washingtonpost.com zu fin­den. In die­sem Artikel zei­gen wir dir, wie du die Icons für dei­nen Blog nut­zen kannst.

Der Dr. Web Font Awesome WordPress Guide

Font Awesome bie­tet dir zur­zeit 634 Icons für alle mög­li­chen Einsatzzwecke. Du kannst zum Beispiel Social-Follow-Icons damit erstel­len, wie ich es auf mei­nem Blog getan habe.

social-follow-icons

Die Vorteile des Icon-Fonts Font Awesome

Ein Icon-Font bie­tet dir gegen­über ver­wen­de­ten Grafiken gro­ße Vorteile. Die Icons kön­nen wun­der­bar ska­liert und daher in jeder gewünsch­ten Größe ange­zeigt wer­den. Zudem kannst du sie so farb­lich anpas­sen, dass sie die von dir gewünsch­ten Farben haben.

Das kann zum Beispiel für eine Business-Website wich­tig sein, wenn es eine Corporate Identity zu befol­gen gilt. Die Anpassung erfolgt über CSS. Daher ist alles mög­lich, was mit CSS rea­li­siert wer­den kann. Die Größe, die Farben, Text-Shadow und vie­les ande­re ist mach­bar.

Auf der fol­gen­den Seite kannst du alle 634 Icons in einer Übersicht anschau­en.

Font Awesome im eigenen Theme einsetzen, so gehts

Du hast gleich zwei Optionen, wie du den Font in dei­nem Theme ein­set­zen kannst. Ich stel­le sie dir nach und nach vor. Hierbei kommt es auch dar­auf an, ob du ein Freund von Plugins oder Handarbeit bist. Für bei­de Vorlieben fin­dest du die rich­ti­ge Methode in die­sem Beitrag.

1 – Die Handarbeit. Wir verlinken nur die CSS-Datei

Bevor du die Icons ein­set­zen kannst, benö­tigst du das CSS für den Icon-Font. Der CDN-Dienstleister KeyCDN hat den Font auf sei­nen Servern gehos­tet. So reicht eine ein­fa­che Verlinkung der Datei im Header dei­ner Website. Das erle­digt ein klei­nes Code-Schnipselchen, dass du in die functions.php dei­nes Themes kopie­ren musst.

Du kannst zwi­schen zwei Methoden aus­wäh­len. Code Nummer eins ver­linkt die CSS-Datei im Header dei­nes Blogs. Code zwei ist ide­al, wenn du dei­ne Website auf Speed opti­mie­ren möch­test. Die Datei wird dann in den Footer gela­den.

Nun kannst du die Icons bereits ein­set­zen. Du hast zwei Möglichkeiten für den hän­di­schen Einsatz. Möglichkeit Nummer eins ist der <i> Tag, den uns Font Awesome für jedes Icons zur Verfügung stellt. Du kannst dir eine Menge Beispiele auf der »Examples«-Seite anschau­en.

So einfach passt du die Größe der Icons an.

So ein­fach passt du die Größe der Icons an.

Du bist jedoch nicht an den <i> Tag gebun­den, son­dern kannst die Icons auch im CSS defi­nie­ren und ein­set­zen. Das ist sehr nütz­lich in Bereichen, die kein zusätz­li­ches Markup ver­tra­gen. Less und Sass wer­den übri­gens eben­so unter­stützt wie rei­nes CSS.

Wenn du ein Icon auf der Übersichtsseite von Font Awesome anklickst, kommst du auf die Seite, wo der spe­zi­el­le <i> Tag ange­zeigt wird. Oberhalb davon steht auch der soge­nann­te Unicode, den du für den Einsatz in der CSS-Datei benö­tigst.

Ein Teil mei­nes CSS für die Social-Follow-Buttons (Screenshot oben) sieht fol­gen­der­ma­ßen aus:

Hier fin­dest du den Unicode:

font-awesome-unicode

Den Icon-Font im WordPress-Editor einsetzen

Natürlich kannst du die schi­cken Icons auch direkt im WordPress-Editor nut­zen, wenn du dei­ne Beiträge schreibst. Dazu musst du nur kurz in den Text-Bereich gehen und den betref­fen­den <i> Tag dort ein­fü­gen, wo er erschei­nen soll.

Gehe auf die Übersichtsseite von Font Awesome, such dir ein Icon aus und kli­cke dar­auf. Auf der nächs­ten Seite fin­dest du den rich­ti­gen Tag für das Icon.

Vielleicht in dieser Überschrift?

font-awesome-einsatz

2 – Alles Easy. Wir nutzen das Plugin »Better Font Awesome«

better-font-awesome

  • Entwickler: Mickey Kay
  • Wird stän­dig wei­ter ent­wi­ckelt: Ja
  • Letzte Version vom: 01.06.2016
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

Der Einsatz die­ses Plugins wird dei­nen Blog nicht groß­ar­tig ver­lang­sa­men, denn die benö­tig­te CSS-Datei wird vom jsDelivr CDN gela­den. Das Plugin ist her­vor­ra­gend geeig­net für Einsteiger in WordPress, da es kei­ne Programmier-Kenntnisse ver­langt.

Der Einsatz der ein­zel­nen Icons ist mit die­sem Plugin sehr ein­fach. Es bie­ten sich dir gleich drei Möglichkeiten, die Icons zu benut­zen.

Nummer 1: Direkt im Editor von WordPress mit einem kom­for­ta­blen Generator.

screenshot-1

Nummer 2: Der Einsatz von Shortcodes

[icon name="flag" class="2x spin border"]

Nummer 3: Der bekann­te HTML-Tag

<i class="fa fa-check-square-o" aria-hidden="true"></i>

Die Einstellungen des Plugins:

Die Einstellungen fin­dest du unter »Einstellungen => Better Font Awesome«.

Die Einstellungen von Better Font Awesome

Hier kannst du aus­wäh­len, wel­che Version von Font Awesome du nut­zen möch­test. Empfehlenswert ist immer die neu­es­te Version – zur­zeit ist das Version 4.6.3. Die zwei­te Option sorgt für eine kom­pri­mier­te CSS-Datei, die schnel­ler lädt. Das soll­test du anha­ken.

Die drit­te Option sorgt dafür, dass ande­re Font Awesome Dateien, die von ande­ren Plugins genutzt wer­den, von “Better Font Awesome” ent­fernt wer­den. Auch das soll­test du anha­ken, den eine Version der Datei reicht voll­kom­men aus.

Der vier­te Bereich in den Einstellungen ist eine Hilfe für dich, wenn du den Shortcode oder den HTML-Tag ein­set­zen möch­test.

Aber es gibt da noch die JavaScript-Version

Richtig. Die gibt es. Unter dem Menüpunkt »Get star­ted« kannst du dei­ne E-Mail-Adresse ein­tra­gen und dir einen JavaScript-Code zuschi­cken las­sen, der den Icon-Font immer aktu­ell hält.

font-awesome-install

Allerdings hat die­ser Code einen enor­men Nachteil. Auch wenn du nach einer Registrierung dafür sor­gen kannst, dass der Code asyn­cron aus­ge­lie­fert wird, so lädt er doch recht lang­sam. Ich habe es direkt für die­sen Beitrag aus­pro­biert und war nicht über­zeugt. Meine Website wur­de um 400 Millisekunden lang­sa­mer als mit der ver­link­ten CSS-Datei.

Ich kann die­se Variante daher nicht emp­feh­len.

Fazit

Nun hast du gleich zwei Möglichkeiten ken­nen­ge­lernt, um die schi­cken Icons von Font Awesome nut­zen zu kön­nen. Ob dir nun die manu­el­le Version oder der Einsatz eines Plugins bes­ser gefällt, musst du selbst ent­schei­den. Zu emp­feh­len sind bei­de Varianten – mit Ausnahme der JavaScript-Version.

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

5 Kommentare

  1. Danke für die­sen Vergleich!

    Als Ergänzung viel­leicht noch: die Verwendung von Icon-Fonts bringt diver­se Nachteile gegen­über SVG Grafiken.

    Daher wür­de ich für die Verwendung ein­zel­ner Grafiken aus font-awe­so­me auf die­se als SVG expor­tier­ten zurück­grei­fen:

    https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

    Oder man kann sich über die Web-App von IcoMoon die gewünsch­ten Icons zusam­men­kli­cken und mit ver­schie­de­nen Optionen zum Einbinden her­un­ter­la­den:

    https://icomoon.io/app/

    Vielleicht für den ein oder ande­ren nütz­lich.

    Viele Grüße

    Sebastian

Schreibe einen Kommentar zu Sebastian Antworten abbrechen

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