Font Awesome in Contao einbinden

In diesem YouTube-Tutorial erkläre ich dir, wie du FontAwesome lokal auf deinem Webspace installieren kannst.

FontAwesome installieren

Grundsätzlich stehen dir zwei Optionen zur Verfügung, um Font Awesome in deine Website zu integrieren.

Option A (nicht empfohlen) ist die einfache Variante, bei der du die Schrift von einem externen Server lädst. Dadurch hast du jederzeit die aktuellste Version von Font Awesome zur Verfügung. Mit Option B (empfohlen) hingegen lädst du alle relevanten Daten auf deinen eigenen Webserver. In diesem Guide werden wir beide Varianten durchgehen, wobei ich natürlich die Empfehlung ausspreche, die Daten auf deinem eigenen Server zu speichern.

Die lokale Nutzung (Option B) bietet Vorteile in der Ladezeit der Webseite und ist datenschutzrechtlich sicher. Solltest du Icons hingegen über die Server von Font Awesome einbinden (Option A) musst du dir das Einverständnis des Nutzers einholen.

Option A

FontAwesome für einen CDN laden

Beginne damit, die Website https://fontawesome.com zu besuchen und auf „Start for free“ zu klicken. Anschließend wirst du aufgefordert, deine E-Mail-Adresse einzugeben, die du später bestätigst. Nach dem Login wirst du dazu aufgefordert, ein Kit zu erstellen und einen Namen dafür festzulegen. Danach kannst du deinen Kit-Code kopieren, der etwa so aussehen sollte: <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>. Überspringe nun Option B).

Option B

FontAwesome selbst hosten

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

und dann auf „Free for web“. Du erhältst nun eine ZIP Datei. Erstelle einen Ordner in deiner Dateiverwaltung z.B. nach diesem Schema: files/font-awesome/

Solltest du die Möglichkeit haben eine ZIP-Datei über deinen Provider zu entpacken, empfehle ich dir, die Downloaddatei per FTP hochzuladen und auf dem Webspace zu entpacken. Weißt du nicht, wie du das umsetzen kannst oder dein Provider stellt dir diese Option nicht zur Verfügung, kannst du jetzt die Downloaddatei entpacken und die Daten per FTP hochladen. Lädst du die verpackte ZIP-Datei hoch, sparst du dir viel Zeit.

Im Seitenlayout von Contao bekannt machen

Um das zu erreichen, logge dich zunächst in das Backend von Contao ein. Klicke dann auf "Themes" -> "Seitenlayouts bearbeiten" -> "bearbeiten" (bei allen genutzten Seitenlayouts). Scrolle ganz nach unten, um dort einen „zusätzlichen Head-Tag“ einzufügen.

Jetzt hast du zwei Möglichkeiten: Du fügst entweder den Code ein, den du bei Option A) erhalten hast, oder bei Option B) fügst du folgenden Code mit dem angepassten Pfad ein: <link href=„/dein-Path/css/all.css“ rel=„stylesheet“>.

Font Awesome in den Body-Text einbauen

Nun kommt der einfache Teil: Wir müssen die eingebundenen Schriften nur noch aufrufen. Dazu besucht ihr zunächst https://fontawesome.com/search, wählt das gewünschte Icon aus und klickt darauf. Schaut nach dem HTML-Code, der ungefähr so aussieht: <i class=„far fa-user“></i>. Beachtet dabei, dass die Klasse auch fas, fal oder fab sein könnte.

Jetzt kannst du diesen Code in einem Text-Element (oder HTML-Element) in der „Quellcode“-Ansicht einfügen, und schon habt ihr das Icon auf eurer Seite.

Ich hoffe, ich konnte dir mit dieser Anleitung helfen. Solltest du Fragen haben, sende mir gern eine Mail.

Zurück

Seit 2017 arbeite ich täglich mit Contao. Auf meinem Blog und YouTube-Kanal findest du eine Vielzahl kostenloser Beiträge zu Contao. Gerne unterstütze ich dich bei deinem Projekt.

Marvin Kellermann

Inhaltsverzeichnis

Contao Partner

Ich bin Contao-, sowie Seamedia-Partner und berate dich gerne bei Fragen zu diesen Produkten.

Kontakt

Digitalagentur MarKe UG
Oststraße 14,
48231 Warendorf

Soziale Medien

Schau gern auf meinen Social Media Accounts vorbei und erfahre mehr über meine Arbeit

Copyright 2024 Digitalagentur mar_ke.
You are using an outdated browser. The website may not be displayed correctly. Close