FontAwesome CKEditor für TYPO3

Warum FontAwesome im CKEditor Redakteuren nützt, aber 300 KB Performance kostet

Redakteure wollen Icons neben Überschriften, in Tabellen und zwischen Textabsätzen platzieren. Ohne technische Hilfe kopieren sie Icon-Bilder als Inline-Images in den RTE - mit kaputtem Layout und inkonsistenter Grösse als Ergebnis. rte_ckeditor_fontawesome löst das Problem sauber: Redakteure wählen Icons aus dem FontAwesome-Katalog direkt im CKEditor per Dialog-Button aus und fügen sie als <i>-Tag in den Richtext ein. Die Icons skalieren automatisch mit der Textgrösse, sind farblich anpassbar und funktionieren in jedem Content-Element.

Der Preis dafür: Die gesamte FontAwesome-Library (ca. 300 KB als Webfont oder 180 KB als SVG-Sprite) wird auf jeder Seite geladen, auch wenn nur 3 Icons verwendet werden. Für performancekritische Websites ist das ein spürbarer Overhead.

Typische Einsatzszenarien

Icon-Listen in Service-Beschreibungen. Ein Dienstleister beschreibt seine Leistungen mit Icon-Listen: Häkchen vor jedem Vorteil, Zahnrad vor jedem Prozessschritt, Telefon-Icon vor der Kontaktnummer. Der Redakteur fügt die Icons direkt im CKEditor ein, ohne einen Entwickler bitten zu müssen. Das funktioniert in Textfeldern, Tabellen und Listen gleichermassen.

Feature-Vergleichstabellen. Produktmanager pflegen Vergleichstabellen im CKEditor. Statt “Ja” und “Nein” verwenden sie grüne Häkchen- und rote Kreuz-Icons. rte_ckeditor_fontawesome stellt diese Icons über den FontAwesome-Katalog bereit. Die Tabelle wird visuell sofort verständlich.

Newsletter-Vorlagen mit Icons. Unternehmen, die Newsletter-Inhalte im TYPO3-Backend pflegen und über eine Newsletter-Extension versenden, nutzen FontAwesome-Icons für visuelle Auflockerung. Da die Icons als <i>-Tags eingefügt werden, funktionieren sie in E-Mail-Clients, die Webfonts unterstützen.

Technische Architektur

rte_ckeditor_fontawesome erweitert den CKEditor im TYPO3-Backend um ein zusätzliches Plugin. Das Plugin registriert einen Button in der CKEditor-Toolbar, der einen Auswahl-Dialog öffnet.

Die Integration funktioniert auf drei Ebenen:

• CKEditor-Plugin: Ein JavaScript-Plugin für CKEditor 4 (TYPO3 v10/v11) bzw. CKEditor 5 (TYPO3 v12+). Das Plugin rendert den Icon-Auswahl-Dialog mit Suchfunktion und Kategorie-Filter. Die verfügbaren Icons werden aus einer JSON-Datei geladen, die den FontAwesome-Katalog abbildet.
• HTML-Ausgabe: Beim Einfügen wird ein <i>-Tag mit den entsprechenden CSS-Klassen in den Richtext geschrieben: <i class="fas fa-check"></i> für ein Solid-Häkchen, <i class="far fa-envelope"></i> für ein Outline-Briefumschlag. Der RTE speichert das Tag als normalen HTML-Inhalt in der Datenbank.
• Frontend-Rendering: Damit die Icons im Frontend sichtbar sind, muss die FontAwesome-CSS-Library auf der Website geladen werden. Das kann als Webfont (CSS + Font-Dateien, ca. 300 KB) oder als SVG-Framework (JavaScript + SVG-Sprite, ca. 180 KB) geschehen. Die Extension liefert die Frontend-Assets nicht mit - die Integration in das Frontend-Template obliegt dem Entwickler.

Abhängigkeiten: TYPO3 Core mit CKEditor (seit v8 im Core), FontAwesome Frontend-Assets (separat einzubinden).

Wichtiger Hinweis zur CKEditor-Version: TYPO3 v12 wechselt von CKEditor 4 auf CKEditor 5. Die Plugin-Architektur hat sich grundlegend geändert. rte_ckeditor_fontawesome-Plugins für CKEditor 4 funktionieren nicht in CKEditor 5. Ein Upgrade erfordert ein komplett neues Plugin.

Häufige Probleme und Lösungen

Problem: Icons werden im Frontend nicht angezeigt. Die häufigste Ursache: FontAwesome-CSS ist nicht im Frontend-Template eingebunden. Die Extension kümmert sich nur um den Backend-Teil (Icon-Auswahl im CKEditor). Die Frontend-Darstellung erfordert, dass fontawesome.min.css und die zugehörigen Font-Dateien (woff2) im Template geladen werden. Die Lösung: FontAwesome über TypoScript als CSS-Include hinzufügen oder über das Asset-Management der TYPO3-Site-Configuration einbinden.

Problem: Icons erscheinen als leere Kästchen. Die Font-Dateien (woff2, woff) werden nicht korrekt geladen. Häufig ist der Pfad in der CSS-Datei falsch konfiguriert, oder der Webserver blockiert Font-Dateien (fehlende CORS-Header bei CDN-Einbindung). Die Lösung: FontAwesome lokal hosten statt per CDN einzubinden. Das vermeidet CORS-Probleme und ist DSGVO-konformer, weil keine Drittanbieter-Requests stattfinden.

Problem: Performance-Impact durch FontAwesome. Eine vollständige FontAwesome-Installation lädt 300+ KB (alle Icon-Kategorien: Solid, Regular, Brands). Wenn die Website nur 10 Icons nutzt, sind 290 KB verschwendet. Die Lösung: FontAwesome Subsetting einsetzen - nur die verwendeten Icons in eine Custom-Font-Datei kompilieren. Alternativ: Auf ein SVG-Icon-System umsteigen, das nur die tatsächlich verwendeten Icons als Inline-SVG einbettet.

Migration und Versions-Kompatibilität

rte_ckeditor_fontawesome ist für TYPO3 v10 und v11 (CKEditor 4) als stabile Extension verfügbar. Für TYPO3 v12 (CKEditor 5) existieren Anpassungen, da die Plugin-Architektur komplett neu ist. CKEditor 5 verwendet ein modernes JavaScript-Module-System statt der CKEditor-4-Plugin-API.

Für TYPO3 v13 und darüber hinaus empfiehlt Gosign eine grundsätzliche Neubewertung des Ansatzes. Statt FontAwesome als Webfont zu laden, setzen moderne Websites auf SVG-Icon-Systeme: Jedes Icon wird als Inline-SVG eingebettet, nur die genutzten Icons werden geladen, die Dateigrösse sinkt von 300 KB auf unter 10 KB. Für Redakteure kann ein Custom CKEditor-Widget entwickelt werden, das Icons aus einem SVG-Sprite auswählen lässt.

Der Migrationsaufwand von FontAwesome auf SVG-Icons beträgt typischerweise 2 bis 3 Tage: SVG-Sprite erstellen, CKEditor-Widget anpassen, bestehende <i>-Tags im Content durch <svg>-Referenzen ersetzen. Gosign automatisiert den letzten Schritt über ein Migrationsskript, das alle <i class="fa-*">-Tags in der Datenbank identifiziert und umschreibt.

Bei der Entscheidung zwischen FontAwesome und SVG-Icons lohnt ein Blick auf die Zahlen: FontAwesome Free enthält über 2.000 Icons, FontAwesome Pro über 7.000. Eine typische Unternehmenswebsite nutzt davon 15 bis 30. Den Rest zahlen alle Besucher als Ladezeit. Ein massgeschneidertes SVG-Sprite mit 30 Icons wiegt 8 bis 15 KB - ein Fünfzigstel der vollständigen FontAwesome-Library. Für Websites, die auf Core Web Vitals und PageSpeed optimiert sind, ist die Entscheidung eindeutig.