Icons mittels Font Awesome auf deiner Contao-Website einbinden

Icons machen teils komplexe Begrifflichkeiten oder Abläufe ganz einfach und sehr schick begreifbar. Gerade auf einer Website ist es wichtigen den Usern schnell verständlich zu machen, worum es geht, was dein Unternehmen anbietet & welche Produkte und Infos der potentielle Kunde auf deiner Website findet.

Die Vorteile Icons per Font Awesome und nicht als Grafik einzubinden

Logischerweise könntest du auch jedes Icon einzeln von einer Bilddatenbank herunter und auf deine Website hochladen - oder jedes selbst designen. Aber selbst, wenn dir das Spaß macht und dich der Zeitfaktor nicht stört, hat Font Awesome gegenüber Icons als Grafiken noch immer einen entscheidenden Vorteil: die kleine Dateigröße und dadurch eine bessere Ladezeit für den User. Das ist ein großer Unterschied, wenn du png-Grafiken nutzt und immer noch ein kleiner Unterschied, nutzt du svg-Dateien. Dennoch: es ist ein Unterschied.

Die Installation von Font Awesome in deine Contao-Website

Im Grunde hast du zwei Möglichkeiten Font Awesome auf deine Website zu bringen. Option A) ist die simple Variante, in der du die Schrift von einem fremden Server lädst, dafür aber zu jedem Zeitpunkt den aktuellsten Stand von Font Awesome besitzt. Bei Option B) lädst du alle relevanten Daten auf dein Webserver und arbeitest dann mit lokalen Dateien. Wir werden beide Varianten einmal durchgehen, ich empfehle logischerweise dabei die Daten auf dem eigenen Server zu speichern. Zum einen, um die Ladegeschwindigkeit zu erhöhen und aus datenschutzrechtlichen Gründen - dazu könnt ihr mit der kostenlosen über Font Awesome gehosteten Variante nur eine Website mit maximal 10.000 Klicks pro Monat nutzen. Wahrscheinlich wird das für die meisten kein Problem sein, ich wollte es der Vollständigkeit halber jedoch nicht unerwähnt lassen.

Option A) Font Awesome über den fremden Server laden

Besucht zuerst die Website: https://fontawesome.com und klickt auf „Start for free“, ihr werdet daraufhin gebeten eine E-Mail einzugeben, die ihr später bestätigt. Nach eurem Login werdet ihr gebeten ein Kit zu erstellen und einen Namen festzulegen. Danach könnt ihr euren Kit-Code kopieren, der sollte in etwa so aussehen: <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> überspring nun option B)

Option B) Font Awesome selbst hosten

Wenn ihr euch dazu entscheidet, die Icon-Schrift auf euren Webserver hochzuladen, geht ihr auf die Website https://fontawesome.com und klickt auf „Download“

und dann auf „Free for web“ - im Download befinden sich alle nötigen Daten. Ladet nun den ganzen Ordner an die entsprechende Stelle eurer Contao-Instanz. Am besten in einem Unterordner von /files

Anschließend müsst ihr diese CSS nur noch einbinden. 

Font Awesome ins Seitenlayout von Contao einbinden:

Dafür loggt ihr euch ins Backend von Contao ein, klickt auf Themes -> Seitenlayouts bearbeiten -> bearbeiten (bei allen genutzten Seitenlayouts) und scrollt nach ganz unten, um dort einen „zusätzlichen Head-Tag“ einzufügen. 

Entweder fügt ihr nun den Code ein, den ihr bei Option A) erhalten habt oder bei Option B) <link href=„/dein-Path/css/all.css“ rel=„stylesheet“> mit angepasstem Pfad.

Font Awesome in den Body-Text einbauen

Jetzt kommt der einfache Teil: wir müssen die eingebunden Schriften nur noch aufrufen. Dazu schaut ihr euch bei https://fontawesome.com/Icons zunächst an, welches Icon ihr verwenden wollt klick es an und schaut nach dem HTML-Code der in etwa so aussieht: <i class=„far fa-user“></i> die Klasse könnte aber auch fas, fal oder fab heißen.

Diesen Code könnt ihr nun in einem Text-Element auf der „Quellcode“-Ansicht einfügen und schon habt ihr das Icon auf eurer Seite.