Mehrere Font-Awesome-Versionen parallel in Contao 5 nutzen

Volle Icon-Kompatibilität für jedes Projekt

22. Oktober 2025 um 10:35 Uhr

Font Awesome gehört zu den bekanntesten und am weitesten verbreiteten Icon-Bibliotheken im Webdesign. Die umfangreiche Sammlung skalierbarer Vektor-Icons wird in unterschiedlichsten Stilvarianten bereitgestellt – etwa Solid, Regular oder Brands – und ermöglicht eine konsistente, moderne Designsprache auf allen Endgeräten.

Gerade bei der Weiterentwicklung bestehender Contao-Projekte entsteht jedoch häufig ein Problem: ältere Seiten nutzen noch Font Awesome 5, neue Layouts setzen bereits auf Version 6 oder 7. Icons ändern sich, Klassen heißen anders – und plötzlich stimmen Symbolanzeigen nicht mehr.

Die Agentur Zentral GmbH hat hierfür eine Lösung implementiert, die den parallelen Einsatz aller drei Font-Awesome-Versionen ermöglicht. So lassen sich ältere Projekte weiterführen und gleichzeitig neue Designs mit aktuellen Icons realisieren – DSGVO-konform und technisch sauber eingebunden.

Anfrage stellen

Hintergrund: Warum mehrere Versionen?

Mit jeder Font-Awesome-Generation werden neue Icons, Umbenennungen und teilweise andere interne Strukturen eingeführt. Dadurch verlieren alte Klassennamen ihre Wirkung oder zeigen falsche Symbole an. Gerade bei Projekten mit langen Update-Zyklen oder mehreren Layout-Ständen im Einsatz ist die parallele Verwendung mehrerer Versionen die effizienteste Lösung, um Kompatibilität sicherzustellen.

Vorbereitung der Contao-Umgebung

Alle benötigten Font-Awesome-Versionen werden lokal eingebunden – nicht über ein CDN. Das ist aus Datenschutzsicht (DSGVO) zwingend zu empfehlen, da dadurch keine externen Serverkontakte entstehen.

Die Struktur im /files/theme/fonts/-Verzeichnis sollte z. B. so aussehen:

/fontawesome-5-15-4/css/all.min.css
/fontawesome-6-7-2/css/all.min.css
/fontawesome-7-1/css/all.min.css

Im Contao-Backend unter Seitenlayout → Stylesheets werden anschließend die CSS-Dateien in dieser Reihenfolge eingebunden:

Font Awesome 5
Font Awesome 6
Font Awesome 7
Eigene style.css (ganz unten)

Alternativ können die erforderlichen Stylesheets auch über Zusätzliche <head>-Tags eingebunden werden.

Versions-Namespaces definieren

Damit sich die Versionen nicht gegenseitig überschreiben, erhält jede Font-Awesome-Generation eigene Klassenpräfixe:

.fa5, .fa5s, .fa5r, .fa5b für Font Awesome 5
.fa6, .fa6s, .fa6r, .fa6b für Font Awesome 6
.fa7, .fa7s, .fa7r, .fa7b für Font Awesome 7

Beispiel

<i class="fa5r fa5-window-restore"></i>
<i class="fa6r fa6-window-restore"></i>
<i class="fa7r fa7-window-restore"></i>

Jede Version verwendet ihre eigene Schriftfamilie und bleibt damit vollständig voneinander entkoppelt.

Font-Family-Korrektur

Damit die parallele Nutzung fehlerfrei funktioniert, müssen in jeder all.min.css nicht nur die Font-Family-Bezeichnungen korrigiert, sondern auch die Klassennamen eindeutig umbenannt werden. Dadurch verhindern wir, dass .fa, .far, .fas oder .fab aus unterschiedlichen Versionen miteinander kollidieren.

Arbeiten in Notepad++

Öffne die gewünschte all.min.css (z. B. die von Font Awesome 5).
Drücke Strg + H, um den Dialog Suchen und Ersetzen zu öffnen.
Unten Suchenmodus → „Regulärer Ausdruck“ aktivieren.
Führe nacheinander folgende Ersetzungen durch (mit Alle ersetzen).

Für Font Awesome 5

Suche nach	Ersetzen durch
(?<![\w-])\.fa(?=[^a-zA-Z0-9-])	.fa5
(?<![\w-])\.fas(?=[^a-zA-Z0-9-])	.fa5s
(?<![\w-])\.far(?=[^a-zA-Z0-9-])	.fa5r
(?<![\w-])\.fab(?=[^a-zA-Z0-9-])	.fa5b
(?<![\w-])\.fa-	.fa5-

Für Font Awesome 6

Suche nach	Ersetzen durch
(?<![\w-])\.fa(?=[^a-zA-Z0-9-])	.fa6
(?<![\w-])\.fas(?=[^a-zA-Z0-9-])	.fa6s
(?<![\w-])\.far(?=[^a-zA-Z0-9-])	.fa6r
(?<![\w-])\.fab(?=[^a-zA-Z0-9-])	.fa6b
(?<![\w-])\.fa-	.fa6-
(?<![\w-])\.fa-brands(?=[^a-zA-Z0-9-])	.fa6b
(?<![\w-])\.fa-regular(?=[^a-zA-Z0-9-])	.fa6r
(?<![\w-])\.fa-solid(?=[^a-zA-Z0-9-])	.fa6s
(?<![\w-])\.fa-classic(?=[^a-zA-Z0-9-])	.fa6
Font Awesome 5 Free	Font Awesome 6 Free
Font Awesome 5 Brands	Font Awesome 6 Brands

Für Font Awesome 7

Suche nach	Ersetzen durch
(?<![\w-])\.fa(?=[^a-zA-Z0-9-])	.fa7
(?<![\w-])\.fas(?=[^a-zA-Z0-9-])	.fa7s
(?<![\w-])\.far(?=[^a-zA-Z0-9-])	.fa7r
(?<![\w-])\.fab(?=[^a-zA-Z0-9-])	.fa7b
(?<![\w-])\.fa-	.fa7-
(?<![\w-])\.fa-brands(?=[^a-zA-Z0-9-])	.fa7b
(?<![\w-])\.fa-regular(?=[^a-zA-Z0-9-])	.fa7r
(?<![\w-])\.fa-solid(?=[^a-zA-Z0-9-])	.fa7s
(?<![\w-])\.fa-classic(?=[^a-zA-Z0-9-])	.fa7
Font Awesome 5 Free	Font Awesome 7 Free
Font Awesome 5 Brands	Font Awesome 7 Brands

Diese Korrektur stellt sicher, dass jede Version ausschließlich ihre eigene Schriftfamilie nutzt.

Lokale, DSGVO-konforme Einbindung

Durch die lokale Ablage der Font-Dateien werden keine Daten an Dritte übertragen.

Die Fonts liegen vollständig auf dem eigenen Server, was nicht nur datenschutzrechtlich unbedenklich ist, sondern auch Performance-Vorteile bietet: schnellere Ladezeiten und kein externes CDN-Fallback.

Die empfohlene Praxis:

Alle benötigten Font-Dateien .woff2 lokal hosten
In style.css gezielt eigene Icons oder Fallback-Deklarationen definieren
font-family-Fallbacks nur in einer Zeile schreiben, z. B.:

font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";

Vorteile der kombinierten Lösung

Parallele Nutzung aller Versionen – bestehende Icons bleiben funktionsfähig
Einheitliches Markup – klar strukturierte Klassennamen pro Version
Volle Kontrolle über Updates – unabhängig von externen CDN-Änderungen
DSGVO-konform – alle Dateien liegen lokal
Flexibel erweiterbar – neue Icons aus Version 7 können direkt integriert werden

Die vollständig angepassten und geprüften CSS-Dateien inkl. der Webfonts (.woff2) stehen auch als Downloadpaket bereit – fertig vorbereitet für den direkten Einsatz in Contao 5.

fontawesome.zip [750,9 KiB]

Fazit

Mit der beschriebenen Lösung kann Font Awesome in Contao 5 versionsübergreifend parallel betrieben werden. So lassen sich alte Designs und neue Komponenten kombinieren, ohne dass Icons verloren gehen oder ersetzt werden müssen. Durch die lokale Einbindung ist die Umsetzung rechtlich sauber, technisch performant und zukunftssicher.

Zurück zur Blog-Übersicht