Sie benötigen ein paar ansprechende Icons für Ihre Website? Dann sind Sie bei Font Awesome genau richtig. Wir erklären, wie Sie die populäre und vor allem kostenlos nutzbare Bibliothek voller Vektor-Symbole und -Logos einfach in WordPress integrieren und anwenden können.

Der Vorteil von Font Awesome Icons

Font Awesome selbst wirbt damit, die weltweit beliebteste und am einfachsten zu nutzende Icon-Sammlung zu sein. Wie auch immer: Wer auf der Suche nach passenden Symbolen für die auf der eigenen Website dargestellten Themen, Produkte oder Services ist, wird hier mit sehr großer Wahrscheinlichkeit fündig.
Dabei bietet die Bibliothek Vektorgrafiken, die sich im Gegensatz zu statischen Bilddateiformaten – etwa JPG – dadurch auszeichnen, dass sie in jeder erdenklichen Größe dargestellt werden können, ohne an Auflösung einzubüßen. Zudem besitzen sie kleine Dateigrößen, was sich positiv auf die Ladegeschwindigkeit einer Website auswirkt.

Allgemeine Informationen zu Font Awesome

In der Regel werden die Icons von Font Awesome als Schriftarten zu einer WordPress-Website hinzugefügt. Das hat den großen Vorteil, dass sie wie herkömmliche Schriften mithilfe der CSS-Regel @font-face gestylt und verändert werden können. Über diesen Weg wird zudem sichergestellt, dass die Symbole in allen gängigen Browsern gleich dargestellt werden.
Font Awesome gibt es in einer kostenlosen und einer kostenpflichtigen Variante. Die kostenlose bringt bereits mehr als 1.500 Vektorgrafiken mit. Wem das nicht ausreicht, der kann sich den Pro-Plan für 60 US-Dollar pro Jahr leisten. Dafür erhält er rund 3.000 Icons und weitere Vorteile obendrauf – etwa den Support eines echten Menschen im Bedarfsfall.

Font Awesome via Plug-in in WordPress integrieren

Einfacher geht’s nicht: Das Team hinter Font Awesome hat ein offizielles Plug-in für die Integration der Icon-Bibliothek in WordPress entwickelt. Einmal installiert und aktiviert ermöglicht es die Einbindung der Vektor-Symbole via Shortcode oder HTML-Codeschnipsel. Dazu brauchen Sie die Icon-Übersicht von Font Awesome stets in greifbarer Nähe, um den korrekten Namen des Symbols Ihrer Wahl parat zu haben.

Der aktuelle, noch junge Block-Editor von WordPress, auch bekannt unter dem Namen Gutenberg, bietet einen eigenen Shortcode-Block an. Einem Bericht von Elegant Themes zufolge stellt dieser die Icons allerdings nicht immer korrekt dar, weshalb Sie im Zweifel lieber den HTML-Block zum Einfügen eines Symbols nutzen. Probieren Sie einfach mal beides aus.


Die Grundeinstellungen – zu finden unter dem Menüpunkt „Einstellungen“ und dann „Font Awesome“ – sollten für die meisten Nutzer so in Ordnung sein, wie sie sind. Von größerem Interesse ist für den ein oder anderen voraussichtlich die Auswahl zwischen „webfont“ und „svg“ im Drop-down-Menü neben dem Punkt „Method“.

Hier könnten Sie sich gegen die oben erwähnte Anlieferung der Icons als Schriftart entscheiden und stattdessen auf SVG-Dateien setzen. Diese haben durchaus ihre Stärken, beispielsweise in der beliebigen Positionierung der Symbole – höher, niedriger, zur Seite oder auch kopfüber gestellt. Dem Laien empfehlen wir jedoch die Verwendung der Icons als Webfonts, weil WordPress und zahlreiche Browser damit besser harmonieren.

Font Awesome manuell in WordPress integrieren

Wenn Sie kein Plug-in zur Integration von Font Awesome in WordPress installieren möchten, können Sie die Icon-Bibliothek auch manuell hinzufügen. Dazu müssen Sie zunächst die Website von Font Awesome aufrufen. Dort wählen Sie die Option „Start Using Free“. Nun sehen Sie bereits den Code, den Sie in die Zwischenablage kopieren. Dieser Code lädt beim Aufruf Ihrer Website die benötigte Bibliothek von externen Servern. Wem das zu bedenklich ist, kann Font Awesome auch auf dem eigenen Server hosten.

Dieser Code muss in den Header-Bereich Ihrer Website eingefügt werden. Die meisten Themes bieten in ihren Einstellungen ein extra dafür vorgesehenes Feld. Sollte dem nicht so sein, können Sie über den Theme-Editor die Datei header.php bearbeiten. Dort fügen Sie den Code direkt über der Zeile </head> ein.

In beiden Fällen funktioniert das Hinzufügen der Icons auf die gleiche Art wie nach der Integration von Font Awesome via Plug-in. Einzige Ausnahme: Es gibt keine Shortcodes. Außerdem zu beachten: Ändern Sie den Code Ihrer WordPress-Website, sollten Sie das in einem Child Theme tun, damit Ihre Anpassungen beim nächsten Update nicht überschrieben werden.

Icons von Font Awesome via CSS stylen

Haben Sie die Integration erfolgreich abgeschlossen, können Sie sich an das Styling der Icons via CSS machen. Jede Vektorgrafik besitzt eine eigene CSS-Klasse. Die Eigenschaften, die am häufigsten verändert werden, sind die Größe und die Farbe der Symbole.
Dabei können Sie Ihre Anpassungen universell in der Datei style.css oder für jedes verwendete Icon einzeln festlegen. Wie das konkret funktioniert, wird auf der Website von Font Awesome anhand zahlreicher Beispiele bestens erläutert.
Legen Sie los!