Lese­zeit: ca. 3 Minu­ten

Anlei­tung zur Instal­la­ti­on von Font Awe­so­me auf eige­nem Server

UPDATE: 03.10.2018
Font-Awe­so­me Ver­si­on: 5.3.1

Da ja die EU-DSGVO seit 25.05.2018 in Kraft getre­ten ist und man lei­der nicht so genau weiss, wofür man alles abge­mahnt wer­den kann. Habe ich nach einer Lösung gesucht, wie man Font Awe­so­me auf sei­nem eige­nen Ser­ver hos­ten kann.

Ich beschrei­be dies hier anhand einer Word­Press Installation.

Schritt 1

Die aktu­el­le Ver­si­on von Font Awe­so­me run­ter­la­den  https://fontawesome.com/ und entpacken

Schritt 2

Eige­nen Ord­ner erstel­len, z.B. mit dem Namen „fon­ta­we­so­me-js”

Schritt 3

Aus dem ent­zipp­ten Ord­ner fol­gen­de JS-Datei in den eige­nen „fon­ta­we­so­me-js” Ord­ner kopieren:

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

Ent­zipp­ter Font Awe­so­me Ordner

 

So sollte der erstellte Ordner aussehen

So soll­te der erstell­te Ord­ner aussehen

Schritt 4

Den erstell­ten Ord­ner „fon­ta­we­so­me-js” dann in das Root-Ver­zeich­nis von Word­Press hochladen

font-awesome-3js

erstell­ter Ord­ner im Root vom WordPress

Schritt 5

Die­sen Code im Hea­der ein­tra­gen und den Link an dei­nem Ser­ver 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 Instal­la­ti­on fer­tig und wir wol­len es auch gleich mal testen.

 

Wie Du jetzt ein Font Awe­so­me aus­suchst und in dei­ne Sei­te einfügst

Schritt 8

Du gehst auf fol­gen­den Link  https://fontawesome.com/icons?d=gallery und suchst dort dein Icon aus. Als Bei­spiel neh­men wir das Word­Press Icon.

Schritt 9

In der Suche gibst Du „Word­Press” ein und alle Fonts dazu erschei­nen unter der Suche.

font-awesome-3

Icon­font WORDPRESS suchen

Schritt 10

Ich ent­schei­de mich für das lin­ke Logo und kli­cke dort mit der Maus drauf

Schritt 11

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

font-awesome-4

Code in die Zwi­schen­ab­la­ge kopieren

Schritt 12

Du gehst zurück zu dei­nem Word­Press und fügst den Code über den „Text-Edi­tor” an die Stel­le ein, wo das Icon erschei­nen soll. Bit­te dafür nicht den „Visu­ell-Edi­tor” nut­zen. Du musst dafür unbe­dingt in den „Text-Edi­tor” schal­ten, sonst wird nur der Code ange­zeigt und nicht das Icon.

font-awesome-5

Text-Edi­tor auswählen

Schritt 13

FERTIG, schau Dir dein Font Awe­so­me mal im Front­end an.

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

 

War­um nicht ein Plug­in dafür nehmen?

Ich wür­de sehr ger­ne dafür ein Plug­in neh­men, doch alle mir bekann­ten Plug­ins bau­en eine Ver­bin­dung zu einem CDN auf, was wohl dann gegen die EU-DSGVO ver­stößt und man sich hohe Stra­fen und Abmah­nun­gen ein­fan­gen kann. Des Wei­tern kön­nen sich auch dei­ne Lade­zei­ten ver­rin­gern, da kei­ne Ver­bin­dung zu einem ande­ren Ser­ver auf­ge­baut wer­den muss. Es ist jetzt alles auf dei­nem Server.

Was kann man sonst noch so mit den Font Awe­so­me machen?

Font Awe­so­me sind kei­ne Icons, so wie ich es oben teil­wei­se geschrie­ben habe. Es ist eigent­lich ein Schrift­zei­chen oder auch ein Buch­sta­be. Man kann also alles machen, was Du auch mit dei­ner Schrift hier machen kannst und sogar noch etwas mehr.

Doch dazu habe ich schon vor eini­ger Zeit einen Bei­trag gemacht. Dort bezie­he ich mich aller­dings auf ein Plug­in, trotz­dem ist damit das Glei­che möglich.

Icon­fonts von Font Awe­so­me mit Word­Press nutzen