Wie du eine Website erstellst, die Besucher in Kunden verwandelt:

Font Awesome in WordPress installieren

font-awesome-wordpress

Du möchtest deine Website mit Icons aufpeppen und hast dich deswegen dazu entschieden, Font Awesome auf deiner WordPress Website zu installieren? Gute Entscheidung! Hierbei gibt es allerdings eine Kleinigkeit, die du unbedingt beachten solltest…

Was ist Font Awesome?

Doch zuerst schauen wir uns jetzt erst einmal an, was Font Awesome eigentlich ist. Vielleicht bist du ja ganz zufällig über diesen Artikel gestolpert und weißt noch gar nichts darüber.

Also:
Font Awesome ist eine schriftbasierte Icon-Sammlung. Das bedeutet für dich, dass du die Icons auf deiner Website genauso einfach wie Schrift verwenden kannst. Du kannst die Icons also in der Größe verändern, ohne dass sie pixelig werden. Auch eine Färbung in einer Farbe deiner Wahl ist möglich.

Wenn du bisher Icons in Bildform (also als PNG oder GIF) eingesetzt hast, solltest du unbedingt auf Schrift-Icons wie Font Awesome umsteigen.
Denn die Bildformat-Icons haben eine unnötige Dateigröße, die deine Website verlangsamen können.

Font Awesome und die DSGVO

Zurück zu der Kleinigkeit, die du beachten solltest: Seit der DSGVO, die am 25. Mai 2018 in Kraft getreten ist, ist es nicht mehr zulässig, die beliebte Icon Schrift mit dieser einzigen Codezeile einzubinden:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">

Diese Codezeile, die du häufig in verschiedensten Blogartikeln findest, sorgt nämlich dafür, dass die Schrift direkt vom Font Awesome Server abgerufen wird.
Wenn du dich an den Blogartikel über Google Fonts erinnerst, weißt du, dass diese Vorgehensweise nicht mehr zulässig ist.

Wie schon die Google Fonts, müssen wir auch Font Awesome lokal in die WordPress Website einbinden. Danach kannst du deine Website fröhlich mit allen möglichen Icons schmücken.

Hier mal ein paar Icons, die ich bisher nie sinnvoll verwenden konnte. Dieser Artikel scheint mir also der perfekte Anlass zu sein:

  

Doch genug davon. Jetzt zeige ich dir, wie du Font Awesome im Handumdrehen in deine WordPress Website einbindest.

Font Awesome lokal in WordPress installieren

Font Awesome downloaden und uploaden

Damit wir Font Awesome installieren können, musst du erstmal die Dateien haben. Diese kannst du ganz einfach direkt über die Hauptseite unter www.fontawesome.com downloaden:

Font Awesome Downloaden

Sobald der Download fertig ist, entpackst du die ZIP Datei mit einem Doppelklick.
Darin befinden sich viele verschiedene Ordner. Wir benötigen allerdings nur den „webfonts“-Ordner und die Datei „all.css“, die du im „css“-Ordner findest.

Font Awesome WordPress Einbindung - Nötige Dateien

Melde dich mit deinem FTP Programm (ich benutze Filezilla) auf deinem Webserver an. Solltest du das bisher noch nie gemacht haben, erhältst du bei deinem Webhosting-Anbieter alle nötigen Infos dazu.

Gehe in den Ordner deiner WordPress Installation und öffne dort den Ordner „wp-content“, dann „themes“ und zuguterletzt deinen Child Theme Ordner bzw. den Ordner deines aktiven WordPress Themes.

Solltest du bereits deine benötigten Google Fonts installiert haben, findest du hier unter Umständen schon den Ordner „fonts“. Falls nicht, kannst du ihn einfach erstellen.

Fonts Ordner FTP WordPress

In diesem Fonts-Ordner erstellst du jetzt einen weiteren Ordner mit dem Namen „fontawesome“. Hier legst du jetzt deinen zuvor gedownloadeten „webfonts“-Ordner ab.

Jetzt erstellst du im „fonts“-Ordner noch einen Ordner mit dem Namen „css“. In den „css“-Ordner legst du die „all.css“-Datei.

Ordnerstruktur Font Awesome WordPress FTP Server

Font Awesome manuell in WordPress einbinden

Die benötigten Dateien sind jetzt auf deinem Webserver gespeichert. Jetzt müssen wir deiner WordPress Website irgendwie zeigen, wo diese Dateien liegen.

Das tun wir, indem wir das Stylesheet (all.css) einbinden.

Hierfür benötigst du den genauen Pfad, unter dem diese Datei abgelegt wurde.
In meinem Fall:

https://www.annikagievers.de/wp-content/themes/child-theme/fonts/fontawesome/css/all.css

Deinen eigenen Pfad fügst du jetzt in folgenden Code ein:

<link href="DEINPFAD" rel="stylesheet">

Für die Einbindung dieses Codes hast du zwei Möglichkeiten:

Option 1: Über Theme-Einstellungen (falls möglich)

Je nachdem, welches WordPress Theme du verwendest, hast du unter Umständen in den Theme Einstellungen die Möglichkeit, dem <head>-Bereich, einen CSS Code einzufügen. Das könnte zum Beispiel so aussehen:

WordPress-Theme-Einbindung-Font-Awesome

Option 2: Direkt über den Quellcode der header.php Datei

Falls dein Theme diese Möglichkeit nicht bietet, musst du den Code direkt in die header.php Datei schreiben.

Hierfür gehst du in dein WordPress Dashboard und anschließend in den Design Editor (diesen Menüpunkt findest du unter Design → Editor).

WordPress Design Editor

Auf der rechten Seite werden jetzt verschiedene Dokumente angezeigt. Hier klickst du bitte auf die „header.php“ Datei. Hier fügst du den Code jetzt nach dem öffnenden-Tag ein.

Font Awesome in Header Stylesheet

→ Du kannst die header.php Datei nicht sehen?
Dann verwendest du wahrscheinlich ein Child-Theme und hast diese Datei noch nicht angelegt. Gehe in diesem Fall noch einmal in dein FTP Programm und öffne den Ordner deines Parent Themes. Downloade die „header.php“ Datei und öffne sie auf deinem Computer mit dem Texteditor. Hier fügst du jetzt deinen Code nach dem öffnenden <head>-Tag ein und speicherst die Datei.Die Datei uploadest du jetzt in deinen Child Theme Ordner.Ab sofort wirst du die header.php auch im Backend deiner WordPress Seite sehen können, falls du noch einmal einen Code dieser Art einfügen musst.

Font Awesome Icons auswählen und einsetzen

Der technische Teil ist erledigt! Jetzt wird es also Zeit für den Spaß.
Um ein Icon auszuwählen, gehst du auf diese Seite: https://fontawesome.com/icons

Font Awesome Icon aussuchen

Oben findest du eine Suchleiste, mit der du bestimmte Icons finden kannst.

Font Awesome Suchergebnis

Wenn du ein passendes Icon gefunden hast, reicht ein Klick, um zur Icon-Unterseite zu gelangen. Hier findest du den benötigten Quellcode, den du auf deiner WordPress Website einbinden kannst.

Font Awesome HTML Code

Dieser Code ist ein HTML Code. In WordPress musst du also darauf achten, den Texteditor und nicht den visuellen Editor zu verwenden:

WordPress Texteditor für HTML

Font Awesome Icons vergrößern

Die Icons werden in der Standardschriftgröße deiner Website angezeigt. Um sie zu vergrößern, musst du die CSS Klasse um einen Zusatz erweitern. Das sieht dann beispielsweise so aus:

Ohne Zusatz

Code: <i class="fas fa-cat"></i>

Zusatz fa-2x

Code: <i class="fas fa-cat fa-2x"></i>

Zusatz fa-3x

Code: <i class="fas fa-cat fa-3x"></i>

Zusatz fa-4x

Code: <i class="fas fa-cat fa-4x"></i>


Ich wünsche dir jetzt viel Spaß beim Einsetzen deiner Font Awesome Icons – vielleicht schaffst du es ja, dem Drachen Icon ein sinnvolles Zuhause zu schenken!

Bist du bereit, deine innere Website Heldin zu wecken? 💪
In meinem kostenlosen Website Videotraining zeige ich dir, wie du dir selbst als absolute Anfängerin eine strategische Website erstellst!✨

Diese Artikel könnten dir auch gefallen:

* Bei diesem Link handelt es sich um einen Affiliate-Link. Das bedeutet, dass ich eine Provision erhalte, wenn du auf der verlinkten Website etwas kaufst. Ich empfehle nur Produkte, von denen ich 100%ig überzeugt bin. Für dich entstehen selbstverständlich keine zusätzlichen Kosten!

Hey, ich bin Annika!

Ich helfe Business Heldinnen (wie dir!) dabei, ihre eigene Website an den Start zu bringen. Und zwar selbst dann, wenn du nie zuvor eine eigene Website erstellt hast!

Du möchtest deine eigene Website erstellen? Dann sind hier zwei Möglichkeiten, wie ich dir dabei helfen kann:

1. Online Kurs "Markenstil in einem Tag":

Dein Logo und dein Markenstil sind ein extrem wichtiger Bestandteil deiner neuen Website. In diesem Online Kurs erstellst du in nur einem einzigen Tag ein Logo und einen Markenstil für dein Business (und für deine Website!).

2. Kostenloses Website Videotraining:

Der perfekte Einstieg in das Thema Website Erstellung. In diesem Videotraining zeige ich dir, wie du es selbst als absolute Anfängerin schaffst, deine eigene, strategische Website zu erstellen!

Hey, hey, 👋

Ja, ich weiß: Pop-Ups nerven. Doch dieses hier ist anders! Denn dieses Pop-Up kann dich in nur einer Stunde in eine Website Heldin verwandeln! ✨

Spaß beiseite: Wenn du endlich deine eigene Website umsetzen möchtest und dir Unterstützung wünschst, ist der schnellste und einfachste Weg, dir mein kostenfreies Website Videotraining anzuschauen.

Völlig uninteressant für dich? Dann reicht ein Klick oben rechts auf das X. Hab einen fabelhaften Tag! 😊