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:
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.
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.
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.
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:
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).
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.
→ 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
Oben findest du eine Suchleiste, mit der du bestimmte Icons finden kannst.
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.
Dieser Code ist ein HTML Code. In WordPress musst du also darauf achten, den Texteditor und nicht den visuellen Editor zu verwenden:
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!
