5
(5)

Font Awesome lokal bei WordPress einbinden

letzte Änderung: 20. Januar 2024


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 irgendwelche Schäden am System, der Hardware oder der Katze…. :-P

Affiliate - Links

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. ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramm, 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.

Du bist auf der Suche nach einem Guide wie man Font Awesome lokal einbinden und auf deiner Seite dann die entsprechenden Icons anzeigen lassen kann?! In diesem Artikel zeige ich dir, wie du diese Icons lokal auf deinem Webhosting einbindest.

Font Awesome? Was das?!

Man könnte jetzt ins Detail gehen und es ganz genau und technisch richtig erklären… Aber… mhhh.. nö!
Kurz, knapp und nicht ganz richtig: Font Awesome bietet kostenlose Icons an.
Ok… Diese Icons sind als Schriftart erstellt – somit gegenüber normalen Bildern besser zu skalieren und zu benutzen.

Jetzt gibt es unterschiedliche Methoden wie du diese Icons bei dir nutzen kannst. So gibt es auch ein Kit welches du auf Ihrer Seite erstellen kannst. Dort würden die Icons dann über ein CDN eingelesen werden. Sogar in der Free Version möglich.
Aber ich bin spätestens seit der DSGVO dagegen etwas von anderen Server zu laden wenn es nicht auch anders geht.
Außerdem habe ich immer gerne selbst die Kontrolle über den Datenfluss und sowas…
Und das sind auch schon zwei Gründe dafür, Font Awesome lokal zu nutzen:

  • DSGVO mag es es nicht wenn Anfragen an 3.Server gestellt werden (was passieren würde wenn du die Icons normal einbinden würdest)
  • Daten und Kontrolle über den Datenfluss bleiben bei dir (keine Anfragen an fremde Server)
  • Geschwindigkeit beim einbinden ist besser wenn du Font Awesome lokal einbindest

Binden wir Font Awesome jetzt auch endlich mal lokal ein?!

ähm.. ja doch – geht schon los!
Dann überlegen wir mal kurz was wir dafür benötigen:

  • Font Awesome Icons

wer hätte das gedacht….

Font Awesome Files herunterladen

Font Awesome macht es uns aber zum Glück sehr einfach und bieten eine Seite an, wo wir alles bekommen was wir benötigen:
Bei “Hosting-Font-Awesome-Yourself” werden wir fündig.
Einmal auf den dicken Button “Download Font Awesome Free for the Web” klicken und die Zip-Datei lokal entpacken.

Jetzt wirst du feststellen, dass hier einige Unterordner vorhanden sind. Für unseren Zweck benötigen wir allerdings nur den “CSS” und den “webfonts” Ordner.

Font Awesome lokal Inhalt

Die Files auf dein Webhosting hochladen

Und diese beiden Ordner müssen wir jetzt auf deinen Server bzw. auf den deines Webhosters hochladen.
Hier gibt es mehrere Möglichkeiten, entweder kannst du eine GUI per Browser erreichen und von dort die Dateien hochladen, oder du nutzt ein FTP-Programm dafür (z.B. Filezilla).
Bei beiden Varianten musst du dich mit deinen Daten einloggen – entweder mit deinem Webhoster-Account oder bei Filezilla mit deinem FTP-User.

Jetzt benötigst du noch einen Platz wo der “CSS” und “webfonts” Ordner hinein sollen.
Grundsätzlich ist es egal wo du sie ablegst. Wichtig nur: der Ort muss immer zu erreichen sein (also immer online sein…)

Ich persönlich habe einen Ordner mit Namen “fontawesome” unter “wp-content” erstellt und dort die beiden Ordner “CSS” und “webfonts” hochgeladen.

Font Awesome lokal Ordner
fontawesome

Und wie kommt jetzt das Icon in mein Theme?

Jetzt wird es leider etwas schwierig(er)… damit wir auf die Webfonts(Icon) zugreifen können, müssen wir die CSS in unseren Header-Bereich einbinden.

 <link href="/deinPfad-zu-fontawesome/css/all.css" rel="stylesheet">


So muss der Eintrag aussehen. In Meinem Fall wäre dass also mit dem richtigen Pfad:

<link href="https://darkwolfcave.de/wp-content/fontawesome/css/all.css" rel="stylesheet">

Aber WIE bekommen wir den jetzt in unseren Header-Bereich?!

  • 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
  • Vielleicht hat dein Theme bereits eine Möglichkeit zum einfachen bearbeiten des Header-Bereichs

Ich möchte dir heute die letzten beiden Möglichkeiten zeigen. Wobei der Theme-Punkt sich dann auf das Theme GeneratePress bezieht. Dieses ist ein sehr umfangreiches und trotzdem “leichtes” Theme, welches ich hier auch schon von Anfang an benutze und es nicht mehr missen möchte.

Allgemein und für alle Themes kann ich das PlugIn CodeSnippets sehr empfehlen. Generell für alle Arten von Änderungen bei denen man ansonsten ein Child-Theme bräuchte. Ein paar Beispiele findest du im Artikel WordPress-Snippets.

Header Bereich mit PlugIn CodeSnippets ändern

Zuerst musst du dann natürlich das PlugIn installieren. Den Link findest du ja bereits weiter oben, bzw. suchst in WordPress bei PlugIns danach und installierst es.
Nach der Installation befindet sich auf der Linken Seite dann ein Neuer Eintrag “Snippets” – da drunter kannst du jetzt mit “neu hinzufügen” ein neues Snippet erstellen.

Snippets Neu hinzufügen
Snippets erstellen

In den nun erscheinenden Felder kannst du einen beliebigen Titel vergeben. Dieser dient nur dazu, damit du später noch weißt wofür das Snippet eigentlich ist.
Ich schreibe hier einfach mal “Headeränderung für fontawesome” rein.
Nun kommen wir zu dem eigentlichen Code. Trage bitte im dem Bereich “Code” folgendes ein und passe den Pfad zu der all.css an:

add_action( 'wp_head', function () { ?>

	<link href="https://DEIN-PFAD/fontawesome/css/all.css" rel="stylesheet">

<?php } );

Zuletzt lässt du “Snippet überall ausführen” und speicherst und aktivierst es. Natürlich kannst du auch noch eine Beschreibung und/oder Schlagwörter vergeben.
Jetzt haben wir schon einmal die Grundvoraussetzung geschaffen um die Icons nutzen zu können. Du kannst den nächsten Punkt dann überspringen. In diesem werde ich noch kurz erklären wie man den Header-Bereich bei dem Theme GeneratePress ändern kann.

Header Bereich bei dem Theme GeneratePress ändern

Das Theme GeneratePress hat bereits eine einfache Möglichkeit um unter anderem dem Header-Bereich zu manipulieren.
Ich zeige dir jetzt fix was du genau dafür machen musst.
Klicke auf “Design” – “Elements”

GeneratePress

Dann auf “Neues Element hinzufügen” und wählst aus dem Drop-Down “Hook” aus:

GeneratePress Hook

Nun kannst du einen Namen/Titel vergeben – dieser dient nur der Übersichtlichkeit.
Im Code Bereich fügst du deinen angepassten Link zu der all.css Datei hinein:

<link href="https://DEIN-PFAD/fontawesome/css/all.css" rel="stylesheet">
GeneratePress Hook Header

Noch zwei Einstellungen und wir haben es geschafft.
Bei “Hook” wählst du jetzt noch “wp_head” aus.
Unter dem Reiter “Anzeigeregeln” musst du jetzt noch definieren wann/wo der Header-Code eingefügt werden soll.
Ich habe hier “Standort” – “Komplette Seite” ausgewählt.
Nun noch speichern/veröffentlichen und wir haben die Grundvoraussetzung geschaffen um die Icons nutzen zu können.

Fast geschafft – jetzt noch Icon / Font anzeigen lassen

Du kannst auf der Seite https://fontawesome.com/icons nach Icons suchen und dir dann den Namen merken / kopieren:

font detail

Der Code sieht dann so aus:

<i class="fas fa-guitar"></i>

Und das Ergebnis, wenn alles richtig gemacht wurde, so:

Diesen Code musst du jetzt auf deiner Seite entsprechend aufrufen. Je nachdem wo du dein Icon sehen möchtest.
Ein Hinweis dazu: beim editieren deiner Seite solltest du entweder den Code-Editor nutzen oder “individuelles HTML”

Wie bekomme ich ein Icon denn in das Navigations Menü?

Diese Frage beantworte ich dir hier in diesem Artikel: https://darkwolfcave.de/icons-in-wordpress-menu-navigation-einbinden/

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

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
Inhalt