Lese­zeit: ca. 3 Minu­ten

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

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 Instal­la­ti­on.

Schritt 1

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

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 kopie­ren:

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

©

 

So sollte der erstellte Ordner aussehen

©

Schritt 4

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

font-awesome-3js

©

Schritt 5

Die­sen Code im Hea­der ein­tra­gen und den Link an dei­nem Ser­ver anglei­chen:

<!-- 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 tes­ten.

 


Wie Du jetzt ein Font Awe­so­me aus­suchst und in dei­ne Sei­te ein­fü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

©

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 Zwi­schen­ab­la­ge

font-awesome-4

©

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

©

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 Plugin dafür neh­men?

Ich wür­de sehr ger­ne dafür ein Plugin neh­men, doch alle mir bekann­ten Plugins 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 Ser­ver.

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 Plugin, trotz­dem ist damit das Glei­che mög­lich.

Icon­fonts von Font Awe­so­me mit Word­Press nut­zen