Anleitung zur Installation von Font Awesome auf eigenem Server

UPDATE: 03.10.2018
Font-Awesome Version: 5.3.1

Da ja die EU-DSGVO seit 25.05.2018 in Kraft getreten ist und man leider nicht so genau weiss, wofür man alles abgemahnt werden kann. Habe ich nach einer Lösung gesucht, wie man Font Awesome auf seinem eigenen Server hosten kann.

Ich beschreibe dies hier anhand einer WordPress Installation.

Schritt 1

Die aktuelle Version von Font Awesome runterladen  https://fontawesome.com/ und entpacken

Schritt 2

Eigenen Ordner erstellen, z.B. mit dem Namen „fontawesome-js

Schritt 3

Aus dem entzippten Ordner folgende JS-Datei in den eigenen „fontawesome-js“ Ordner kopieren:

  • Die JS-Datei „all.js
Entzippter Font Awesome Ordner

©

 

So sollte der erstellte Ordner aussehen

©

Schritt 4

Den erstellten Ordner „fontawesome-js“ dann in das Root-Verzeichnis von WordPress hochladen

font-awesome-3js

©

Schritt 5

Diesen Code im Header eintragen und den Link an deinem Server angleichen:

<!-- Font Awesome lokal auf eigenem Server -->

<script defer src="https://www.DEINE-URL.de/fontawesome-js/all.js"></script> <!--load all styles -->

 

Schritt 6

Nun bist Du mit der Installation fertig und wir wollen es auch gleich mal testen.

 


Wie Du jetzt ein Font Awesome aussuchst und in deine Seite einfügst

Schritt 8

Du gehst auf folgenden Link  https://fontawesome.com/icons?d=gallery und suchst dort dein Icon aus. Als Beispiel nehmen wir das WordPress Icon.

Schritt 9

In der Suche gibst Du „WordPress“ ein und alle Fonts dazu erscheinen unter der Suche.

font-awesome-3

©

Schritt 10

Ich entscheide mich für das linke Logo und klicke dort mit der Maus drauf

Schritt 11

Nun klickst Du auf das Icon, wo der rote Pfeil drauf zeigt, somit ist der Code in deiner Zwischenablage

font-awesome-4

©

Schritt 12

Du gehst zurück zu deinem WordPress und fügst den Code über den „Text-Editor“ an die Stelle ein, wo das Icon erscheinen soll. Bitte dafür nicht den „Visuell-Editor“ nutzen. Du musst dafür unbedingt in den „Text-Editor“ schalten, sonst wird nur der Code angezeigt und nicht das Icon.

font-awesome-5

©

Schritt 13

FERTIG, schau Dir dein Font Awesome mal im Frontend an.

<i class="fab fa-wordpress"></i> 

 


Warum nicht ein Plugin dafür nehmen?

Ich würde sehr gerne dafür ein Plugin nehmen, doch alle mir bekannten Plugins bauen eine Verbindung zu einem CDN auf, was wohl dann gegen die EU-DSGVO verstößt und man sich hohe Strafen und Abmahnungen einfangen kann. Des Weitern können sich auch deine Ladezeiten verringern, da keine Verbindung zu einem anderen Server aufgebaut werden muss. Es ist jetzt alles auf deinem Server.

Was kann man sonst noch so mit den Font Awesome machen?

Font Awesome sind keine Icons, so wie ich es oben teilweise geschrieben habe. Es ist eigentlich ein Schriftzeichen oder auch ein Buchstabe. Man kann also alles machen, was Du auch mit deiner Schrift hier machen kannst und sogar noch etwas mehr.

Doch dazu habe ich schon vor einiger Zeit einen Beitrag gemacht. Dort beziehe ich mich allerdings auf ein Plugin, trotzdem ist damit das Gleiche möglich.

Iconfonts von Font Awesome mit WordPress nutzen