5
(8)

Font Awesome lokal bei Wordpress einbinden

Erstellt / aktualisiert

wichtige Informationen...

Affiliate - Offenlegung

Auf meiner Seite verwende ich sogenannte Affiliate-Links, diese sind mit einem gekennzeichnet, damit du diese auch direkt erkennen kannst.
Sobald du über so einen Link das Produkt kaufen würdest, erhalte ich möglicherweise eine Provision vom jeweiligen Anbieter. Außerdem entstehen für Dich natürlich keine zusätzlichen Kosten!
Mich unterstützt du damit aber enorm und trägst dazu bei, dass es auch in Zukunft weitere Guides und Vorstellungen von mir hier geben wird.

Ich empfehle nur Tools / PlugIns / Anbieter / Produkte, hinter denen ich auch wirklich stehe, bzw. bei denen ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramms, das zur Bereitstellung eines Mediums für Webseiten konzipiert wurde, mittels dessen durch die Platzierung von Partner-Links zu Amazon.de Entgelte verdient werden können.


ACHTUNG! Bitte lesen!

Du benutzt das hier Gezeigte natürlich, wie immer, auf eigenes Risiko!
Ich habe alles selbst durchgeführt und mir mein System nicht zerschossen oder sonst irgendwelche negativen Auffälligkeiten bemerkt.

Aber dennoch… Backups sind immer gut….
Für WordPress-Backups am besten mit UpdraftPlus

Ich übernehme keine Haftung für Schäden jeglicher Art am System, der Hardware oder der Katze…. :-P


DarkWolfCave.de

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:

  1. 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.
  2. 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.
  3. 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 StyleAvailabilityWeb Font FilenameCSS Filename
BrandsFreefa-brands-400.*brands.css
SolidFreefa-solid-900.*solid.css
RegularPro onlyfa-regular-400.*regular.css
LightPro onlyfa-light-300.*light.css
ThinPro onlyfa-thin-100.*thin.css
DuotonePro onlyfa-duotone-900.*duotone.css
Sharp SolidPro onlyfa-sharp-solid-900.*sharp-solid.css
Sharp RegularPro onlyfa-sharp-regular-400.*sharp-regular.css
Sharp LightPro onlyfa-sharp-light-300.*sharp-light.css
Sharp ThinPro onlyfa-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:

darkwolfcave fontawesome download 780

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).

Font Awesome lokal Inhalt
Font Awesome lokal hosten
Font Awesome lokal installieren

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:

Font Awesome lokal installieren - Solid
Font Awesome lokal installieren - Brands

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”:

darkwolfcave fontawesome snippets

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:

Alles richtig, wenn du eine Flagge siehst —>>>

Einen Hinweis dazu: beim Editieren deiner Seite solltest du entweder den Code-Editor nutzen oder “individuelles HTML” als Block auswählen.

Wie bekomme ich ein Font Awesome Icon in das Navigations Menü?

ICONS IN DIE WORDPRESS MENÜ NAVIGATION EINBINDEN
Avatar-Foto

Ich bin ein 1977 geborener Technik-Nerd. Mein erster Gefährte in der digitalen Welt war ein C64, der den Grundstein für meine Leidenschaft für Technologie legte. So wurde mein Hobby zum Beruf, und ich begann eine Ausbildung zum IT-Systemelektroniker. Selbst in meiner knappen Freizeit widme ich mich weiterhin meiner Leidenschaft fürs Gaming, verschiedene Programmiersprachen und andere IT-bezogene Themen. Ansonsten mag ich Hunde und bin fasziniert von Wölfen!

Gefällt dir der Beitrag?
Hinterlasse gerne ein paar Sterne!

Wie hilfreich war dieser Beitrag für Dich?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 8

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Abonnieren
Benachrichtige mich bei
guest
5 Kommentare
Neueste
Älteste
Inline Feedbacks
Alle Kommentare anzeigen

GitHub - Sourcecode

Den gesamten und aktuellen Sourcecode meiner Scripte, Snippets und Tools findest du ab jetzt auch in meinem GitHub Account!
Inhalt