Mehrere Font-Awesome-Versionen parallel in Contao 5 nutzen
Volle Icon-Kompatibilität für jedes Projekt
Ein Icon ist eine Kleinigkeit – bis es fehlt. Dann zeigt der Browser ein leeres Quadrat, und die Suche beginnt: Version 5 kannte das Symbol noch, Version 6 hat es umbenannt, Version 7 sortiert die Stile neu. Font Awesome, die meistgenutzte Icon-Bibliothek im Web, ist über die Jahre dreimal umgezogen – und gewachsene Contao-Projekte tragen oft Spuren aller drei Epochen.
Genau da setzt dieser Beitrag an: ältere Seiten mit Font Awesome 5, neue Layouts mit Version 6 oder 7 – und eine Lösung, mit der alle drei Generationen konfliktfrei nebeneinander laufen. Lokal eingebunden, DSGVO-konform und ohne dass ein einziges Bestandsicon angefasst werden muss.
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.cssIm 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++
- Die gewünschte all.min.css öffnen (z. B. die von Font Awesome 5).
- Mit Strg + H den Dialog Suchen und Ersetzen aufrufen.
- Unten den Suchmodus „Regulärer Ausdruck“ aktivieren.
- Die folgenden Ersetzungen nacheinander ausführen (jeweils 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.
Update 2026: SVG-Sprite statt Icon-Webfont
Update 2026: Mehrere Font-Awesome-Versionen parallel zu betreiben löst ein Kompatibilitätsproblem – erkauft es aber mit Ladezeit. Ein Icon-Webfont überträgt immer den kompletten Zeichensatz, auch wenn nur zwölf Symbole verwendet werden. Zwei Versionen bedeuten zwei Zeichensätze.
Kurz gesagt: Wer die Icon-Frage grundsätzlich löst, ersetzt den Webfont durch ein SVG-Sprite. Das Ergebnis: statt 150 bis 400 Kilobyte Schrift nur wenige Kilobyte Vektorgrafik, kein Aufblitzen unsichtbarer Icons, saubere Barrierefreiheit – und kein Versionskonflikt mehr, weil jedes Symbol einzeln existiert.
Schritt 1: nur die benötigten Icons einsammeln
# Welche Icons werden überhaupt genutzt?
grep -rhoE 'fa-[a-z0-9-]+' templates/ files/theme/ \
| sort -u > icons.txt
# Ergebnis in der Praxis: meist 10 bis 25 Icons –
# geladen wird ein Zeichensatz mit über 2.000.Schritt 2: SVG-Sprite bauen
# Einzel-SVGs zu einem Sprite zusammenfassen
npx svg-sprite-generate -d icons/ -o files/theme/img/icons.svg
# Ergebnis: eine Datei mit <symbol id="icon-phone">, <symbol id="icon-mail"> …<!-- Verwendung im Template -->
<svg class="icon" width="24" height="24" aria-hidden="true" focusable="false">
<use href="/files/theme/img/icons.svg#icon-phone"></use>
</svg>
<!-- Icon mit Bedeutung (kein reines Dekor): -->
<svg class="icon" width="24" height="24" role="img" aria-label="Telefon">
<use href="/files/theme/img/icons.svg#icon-phone"></use>
</svg>/* Farbe folgt dem Text – der große Vorteil gegenüber Bilddateien */
.icon { fill: currentColor; vertical-align: -.125em; }Wenn Font Awesome bleiben soll
Manchmal ist der Umstieg keine Option, etwa weil eine Erweiterung die Klassen fest verdrahtet. Dann hilft zumindest ein Zuschnitt: Font Awesome lässt sich als Teilmenge („Subset") ausliefern, die nur die verwendeten Symbole enthält. Wichtig ist dabei die Ladestrategie:
<!-- Schriftdatei früh laden, aber Text nicht blockieren -->
<link rel="preload" as="font" type="font/woff2" crossorigin
href="/files/theme/fonts/fa-solid-subset.woff2">@font-face {
font-family: "FA Solid";
src: url("/files/theme/fonts/fa-solid-subset.woff2") format("woff2");
font-display: block; /* Icons: block statt swap – sonst blitzen Kästchen auf */
}Was das praktisch bringt
- Deutlich weniger Übertragungsvolumen – bei zwei parallelen Versionen ist der Unterschied am größten.
- Kein Layoutsprung beim Nachladen der Schrift, weil SVGs sofort da sind.
- Kein Versionskonflikt: Ein Icon aus Version 5 und eines aus Version 7 können nebeneinander im selben Sprite liegen.
- Barrierefreiheit sauber lösbar – dekorative Icons per
aria-hidden, bedeutungstragende mitaria-label. Ein Icon-Webfont wird von manchen Screenreadern als kryptisches Zeichen vorgelesen.
Fazit
Drei Icon-Generationen in einem Projekt – was nach Chaos klingt, wird mit Namespaces zur geordneten Nachbarschaft: Jede Version behält ihre Schriftfamilie, ihre Klassen, ihre Symbole, und nichts kommt sich in die Quere. Alte Designs laufen weiter, neue Komponenten nutzen aktuelle Icons, und weil alles lokal liegt, bleiben Datenschutz und Ladeverhalten in der eigenen Hand.
Wer ohnehin gerade aufräumt, sollte allerdings den Blick ins Update werfen: Ein SVG-Sprite mit den tatsächlich genutzten Symbolen macht die Versionsfrage komplett überflüssig – und spart nebenbei den Großteil des Übertragungsvolumens. Die Parallel-Lösung ist die Brücke; das Sprite ist das Ufer.