Font Awesome lokal bei WordPress einbinden
Suchst du nach einer Schritt-für-Schritt-Anleitung, um Font Awesome lokal in deine WordPress-Website einzubinden und die entsprechenden Icons anzuzeigen? Dann bist du hier genau richtig! In diesem Blogartikel zeige ich dir, wie du Font Awesome Icons lokal auf deinem Webhosting einbinden kannst. Nebenbei solltest du aus Datenschutzgründen und um die volle Kontrolle über den Datenfluss zu behalten, diese genauso wie Google Fonts immer lokal einbinden. Außerdem verbessert dies die Ladezeiten deiner Website erheblich. Lass mich dir zeigen, wie du dies umsetzen kannst.
DarkWolfCave.de
Font Awesome? Was ist das?!
Wir könnten uns jetzt tief in die technischen Details von Font Awesome verlieren, aber ganz ehrlich, wen interessiert das wirklich? Für uns ist nur interessant, was es so im groben ist, und dass man “es” lokal einbinden kann.
Daher kurz gesagt, Font Awesome bietet eine Fülle kostenloser Icons an, die als Schriftart erstellt sind. Das bedeutet, sie lassen sich besser skalieren und nutzen als herkömmliche Bilder.
Es gibt verschiedene Möglichkeiten, diese Icons auf deiner Website einzubinden. Du könntest unter anderem ein Kit verwenden, das über ein CDN eingebunden wird. Doch spätestens seit der DSGVO bin ich skeptisch gegenüber dem Laden von Ressourcen von externen Servern. Ich bevorzuge es, die Kontrolle über den Datenfluss zu behalten. Daher sind hier drei Gründe, warum ich Font Awesome lokal einbinde:
- DSGVO-Konformität: Die DSGVO mag es nicht, wenn deine Website Ressourcen von Drittanbietern lädt, was passieren würde, wenn du die Icons normal einbindest. Deshalb ist es ratsam, die Icons lokal zu hosten, um mögliche Datenschutzverletzungen zu vermeiden, denn es wird dann ja immer deine IP an einen fremden Server übermittelt.
- Datenkontrolle: Wenn du Font Awesome lokal einbindest, behältst du die Daten und die Kontrolle über den Datenfluss bei dir, ohne Anfragen an externe Server zu senden. Dies ermöglicht es dir, die Einhaltung der Datenschutzbestimmungen besser zu gewährleisten.
- Geschwindigkeit: Das Einbinden von Font Awesome lokal kann auch die Ladezeiten verbessern, da die Icons schneller von deinem eigenen Server geladen werden. (außer du bist weltweit unterwegs, dann bietet sich ein CDN tatsächlich eher an. Das DSGVO-Problem bleibt allerdings bestehen).
Hinweis: Bitte beachte, dass die in diesem Artikel bereitgestellten Informationen auf meinen persönlichen Erfahrungen und Vorlieben basieren und nicht als rechtliche oder professionelle Beratung betrachtet werden sollten. Es wird empfohlen, sich bezüglich der DSGVO-Konformität von Webressourcen von einem Rechtsanwalt oder einer anderen qualifizierten Person beraten zu lassen.
Binden wir Font Awesome jetzt auch endlich mal lokal ein?!
Na klar, geht schon los! In den vergangenen Jahren hat sich ein wenig verändert, auch ein Grund gewesen diesen Artikel zu überarbeiten.
Es gibt zum Glück weiterhin eine hervorragende Dokumentation und Möglichkeiten, die Font Awesome Dateien herunterzuladen und bei uns lokal einzubinden.
Das Herunterladen der Dateien
Ich beziehe mich hier auf die kostenlosen und frei zugänglichen Styles. Es gibt auch eine kostenpflichtige Pro-Version, die deutlich mehr unterschiedliche Styles beinhaltet. Aber für den normalen Gebrauch reicht die freie Version komplett aus.
Hier eine kleine Übersicht, was du mit welcher Version benutzten kannst. Diese kann sich aber immer mal ändern, daher schaue am besten direkt bei Font Awesome nach.
Icon Style | Availability | Web Font Filename | CSS Filename |
---|---|---|---|
Brands | Free | fa-brands-400.* | brands.css |
Solid | Free | fa-solid-900.* | solid.css |
Regular | Pro only | fa-regular-400.* | regular.css |
Light | Pro only | fa-light-300.* | light.css |
Thin | Pro only | fa-thin-100.* | thin.css |
Duotone | Pro only | fa-duotone-900.* | duotone.css |
Sharp Solid | Pro only | fa-sharp-solid-900.* | sharp-solid.css |
Sharp Regular | Pro only | fa-sharp-regular-400.* | sharp-regular.css |
Sharp Light | Pro only | fa-sharp-light-300.* | sharp-light.css |
Sharp Thin | Pro only | fa-sharp-thin-100.* | sharp-thin.css |
Wie du sicher gut erkennen kannst, benötigen wir also lediglich die brands.css
und solid.css
Dateien.
Herunterladen kannst du sie von hier: https://fontawesome.com/download.
Wir entscheiden uns für die neueste Version des “Free For Web” Angebots:
Die richtigen Dateien zu deinem Hoster laden
Jetzt hast du schon alles, was du benötigst, um die Font Awesome lokal hosten zu können. Allerdings müssen die Daten auch noch zu deinem Webhoster hochgeladen werden.
Schritt 1: Die heruntergeladene Datei musst du erst noch entpacken. Hierfür kannst du den Windows eigenen Entpacker oder ein Tool wie zum Beispiel 7-ZIP benutzen. Im Hauptordner befinden sich diverse Unterordner. Für uns sind nur die Ordner /webfonts und /css interessant. Der /css-Ordner enthält die CSS-Dateien für die Icons, während der /webfonts-Ordner alle Schriftdateien enthält, die von den CSS-Dateien abhängen.
Schritt 2: Wähle die richtigen Dateien aus! Oder nimm einfach, so wie ich auch, den gesamten Inhalt der beiden Ordner. Diese sind jetzt nicht so wirklich groß, sprengen somit sicher auch nicht deinen Speicherplatz auf deinem Webserver. Und keine Sorge: dadurch wird auch dein WordPress nicht langsamer. Denn diese Dateien werden nicht automatisch durch WordPress eingebunden.
Schritt 3: Kopiere nun die ausgewählten Dateien in das Verzeichnis deines Hosters, in dem du deine Frontend-Assets aufbewahrst.
Stelle sicher, dass du die grundlegende Styling-Datei – /css/fontawesome.css – sowie die CSS-Dateien für die gewünschten Icon-Stile einschließt. (oder du nimmst alle).
Ich gehe davon aus, dass du weißt, wie du Dateien auf deinen Hoster hochladen kannst. Entweder mit FileZilla, Putty oder MobaXterm (welches ich immer wieder sehr empfehlen kann!)
Du wirst hier einen groben Überblick finden.
Allerdings biete ich dir auch noch etwas mehr Support an:
- Du benötigst persönlichen Support
- Du möchtest von Beginn an Unterstützung bei deinem Projekt
- Du möchtest ein hier vorgestelltes Plugin durch mich installieren und einrichten lassen
- Du würdest gerne ein von mir erstelltes Script etwas mehr an deine Bedürfnisse anpassen
Für diese Punkte und noch einiges mehr habe ich einen limitierten
VIP-Patreon Tarif
eingerichtet. Falls er dir dort zurzeit nicht angeboten wird,
kontaktiere mich bitte über Discord und wir finden eine Lösung!
Die CSS in den <head> Bereich einfügen
Schritt 1: Integration in deine Webseite – Du musst auf jeden Fall die CSS-Datei – /css/fontawesome.css – und dann noch die brands.css und/oder solid.css in den Header deiner Webseite verlinken. Dadurch wird das Styling für die Icons aktiviert und sie sind bereit, verwendet zu werden.
<link href="/deinPfad-zu-fontawesome/css/fontawesome.css" rel="stylesheet" /> <link href="/deinPfad-zu-fontawesome/css/brands.css" rel="stylesheet" /> <link href="/deinPfad-zu-fontawesome/css/solid.css" rel="stylesheet" />
Du weißt nicht genau, ob du die brands.css, die solid.css oder beide benötigst?
Es gibt einen recht einfachen Weg das festzustellen, sofern du keine hunderte Icons verwenden möchtest…
Besuche die Webseite von Font Awesome und suche dort nach den Icons, die du bei dir benutzen möchtest.
Zum Beispiel nach “House” und “Discord”. Du erkennst an einem Tooltip, sowie an der Klasse, ob es sich um ein “solid” oder “brands” handelt. Entsprechend musst die CSS Dateien einbinden:
Schritt 2: In den <head> Bereich einfügen. Aber wie kommen diese CSS-Dateien in den <head> Bereich?
Auch für dieses Problem gibt es wieder mehrere mögliche Lösungen.
- Du kannst ein Child-Theme erstellen und hier dann die header.php aus deinem Original-Theme hinzufügen und bearbeiten
- Du kannst über das PlugIn CodeSnippets die benötigten Änderungen vornehmen (empfohlen)
- Vielleicht hat dein Theme oder ein anderes Plugin bereits eine Möglichkeit zum einfachen Bearbeiten des Header-Bereichs
Ich werde dir zeigen, wie du ein kleines Snippet einbauen kannst, ohne in der header.php herumfummeln zu müssen.
Auch für diverse anderer Dinge (ein paar Beispiele findest du im Artikel WordPress-Snippets) kann ich dir nur nahelegen, das Plugin CodeSnippets zu nutzen. Ich hatte mir damals eine Lifetime-Lizenz für die Pro-Version gegönnt. Primär um die Entwickler zu unterstützen, aber was sie seitdem alles noch hinzugefügt haben… Der Hammer! Bereue es keine Sekunde.
Ein letzter Hinweis noch: Es gab diese Lifetime-Lizenz nur zur Einführung, danach dann nur noch das Abo-Modell (oder die freie Version). Daher ein Pro-Tipp von mir: Schau gelegentlich mal bei CodeSnippets vorbei, und wenn es wieder eine Lifetime gibt, schnapp sie dir!
Header Bereich mit CodeSnippets ändern
Je nachdem, ob du die kostenlose, oder die Pro-Version benutzt, verläuft die Installation ein wenig anders.
Erstere findest du ganz normal über das PlugIn-Verzeichnis von WordPress und kannst es dort installieren und aktivieren.
Bei der Pro-Variante findest du die ZIP-Datei in deinem Account (auch deine Lizenz), lädst diese herunter, dann fügst du es über “PlugIns hinzufügen -> hochladen” hinzu, installierst und aktivierst es.
Danach findest du in deinem Admin-Menü einen neuen Eintrag mit dem Namen “Snippets” und dem Unterpunkt “Add new” oder “Neues hinzufügen”:
Solltest du die kostenlose Version benutzen, kann es bei dir ein wenig anders aussehen. Aber der Bereich Functions sollte auf jeden Fall vorhanden sein. Als Titel kannst du irgendwas eintragen, damit du später noch weißt, wofür das Snippet gedacht war. Vielleicht “Header-Anpassungen” oder so.
Nun kommen wir zu dem eigentlichen Code. Trage bitte in dem Bereich “Code” Folgendes ein und passe den Pfad jeweils an. Du erinnerst dich?! Etwas weiter oben haben wir unter anderem die CSS Dateien zu deinem Webhoster hinzugefügt. Und hier muss jetzt der Pfad zu diesem Ordner, bzw. den Dateien hinein. Und falls du brands.css oder solid.css NICHT benutzt, lösche die entsprechende Zeile einfach.
add_action( 'wp_head', function () { ?> <link href="/deinPfad-zu-fontawesome/css/fontawesome.css" rel="stylesheet" /> <link href="/deinPfad-zu-fontawesome/css/brands.css" rel="stylesheet" /> <link href="/deinPfad-zu-fontawesome/css/solid.css" rel="stylesheet" /> <?php } );
Als ich diesen Guide vor Jahren geschrieben habe, also vor dem Update, wurde noch die all.css eingebunden. Davon kann ich jetzt nur noch abraten (nebenbei sagt auch Font Awesome man sollte diese Datei lediglich in einer Testumgebung nutzen). Denn von recht schlanken 71 KByte ist diese auf 138 KByte angewachsen.
Hast du die paar Zeilen angepasst und eingetragen, wählst du “Snippet überall ausführen”, speicherst und aktivierst es.
Natürlich kannst du auch noch eine Beschreibung und/oder Schlagwörter vergeben.
Und das war’s auch schon! Du hast jetzt erfolgreich Font Awesome lokal in deine Webseite integriert und kannst die coolen Icons ab sofort nutzen.
Fast geschafft – jetzt noch das Icon anzeigen lassen
Wie bereits weiter oben erwähnt, kannst du bei FontAwesome nach Icons suchen. Dort findest du dann bei den Eigenschaften auch einen kurzen Code, der in etwa so aussehen kann (hier auch wieder bedenken, dass du die solid.css für “solid” und die brands.css für “brands” benötigst):
<i class="fa-solid fa-flag-checkered"></i>
Diesen kannst du jetzt überall auf deiner Seite in einem HTML-Bereich einfügen:
Einen Hinweis dazu: beim Editieren deiner Seite solltest du entweder den Code-Editor nutzen oder “individuelles HTML” als Block auswählen.