FontAwesome CKEditor for TYPO3

Why FontAwesome in CKEditor helps editors but costs 300 KB in performance

Editors want to place icons next to headings, in tables and between text paragraphs. Without technical help, they copy icon images as inline images into the RTE - with broken layout and inconsistent sizing as the result. rte_ckeditor_fontawesome solves this problem cleanly: editors select icons from the FontAwesome catalog directly in CKEditor via a dialog button and insert them as <i> tags into the rich text. The icons scale automatically with the text size, are color-customizable and work in every content element.

The price: the entire FontAwesome library (approx. 300 KB as webfont or 180 KB as SVG sprite) is loaded on every page, even if only 3 icons are used. For performance-critical websites, this is a noticeable overhead.

Typical use cases

Icon lists in service descriptions. A service provider describes their offerings with icon lists: checkmark before each benefit, gear icon before each process step, phone icon before the contact number. The editor inserts icons directly in CKEditor without needing to ask a developer. This works in text fields, tables and lists equally.

Feature comparison tables. Product managers maintain comparison tables in CKEditor. Instead of “Yes” and “No”, they use green checkmark and red cross icons. rte_ckeditor_fontawesome provides these icons through the FontAwesome catalog. The table becomes immediately visually comprehensible.

Newsletter templates with icons. Companies that maintain newsletter content in the TYPO3 backend and send them through a newsletter extension use FontAwesome icons for visual enhancement. Since the icons are inserted as <i> tags, they work in email clients that support web fonts.

Technical architecture

rte_ckeditor_fontawesome extends the CKEditor in the TYPO3 backend with an additional plugin. The plugin registers a button in the CKEditor toolbar that opens a selection dialog.

Integration works on three levels:

• CKEditor plugin: a JavaScript plugin for CKEditor 4 (TYPO3 v10/v11) or CKEditor 5 (TYPO3 v12+). The plugin renders the icon selection dialog with search function and category filter. Available icons are loaded from a JSON file that maps the FontAwesome catalog.
• HTML output: on insertion, an <i> tag with the corresponding CSS classes is written into the rich text: <i class="fas fa-check"></i> for a solid checkmark, <i class="far fa-envelope"></i> for an outline envelope. The RTE stores the tag as normal HTML content in the database.
• Frontend rendering: for icons to be visible in the frontend, the FontAwesome CSS library must be loaded on the website. This can be as a webfont (CSS + font files, approx. 300 KB) or as SVG framework (JavaScript + SVG sprite, approx. 180 KB). The extension does not ship frontend assets - integration into the frontend template is the developer’s responsibility.

Dependencies: TYPO3 Core with CKEditor (part of the Core since v8), FontAwesome frontend assets (to be included separately).

Important note on CKEditor version: TYPO3 v12 switches from CKEditor 4 to CKEditor 5. The plugin architecture has fundamentally changed. rte_ckeditor_fontawesome plugins for CKEditor 4 do not work in CKEditor 5. An upgrade requires a completely new plugin.

Common problems and solutions

Icons not displayed in the frontend. The most common cause: FontAwesome CSS is not included in the frontend template. The extension handles only the backend part (icon selection in CKEditor). Frontend rendering requires that fontawesome.min.css and the associated font files (woff2) are loaded in the template. Solution: add FontAwesome via TypoScript as a CSS include or through the TYPO3 site configuration’s asset management.

Icons appear as empty boxes. The font files (woff2, woff) are not loading correctly. Frequently, the path in the CSS file is misconfigured or the web server blocks font files (missing CORS headers with CDN embedding). Solution: host FontAwesome locally instead of via CDN. This avoids CORS issues and is more GDPR (UK: UK GDPR)-compliant because no third-party requests occur.

Performance impact from FontAwesome. A complete FontAwesome installation loads 300+ KB (all icon categories: Solid, Regular, Brands). If the website uses only 10 icons, 290 KB is wasted. Solution: use FontAwesome subsetting - compile only the used icons into a custom font file. Alternatively: switch to an SVG icon system that embeds only the actually used icons as inline SVGs.

Migration and version compatibility

rte_ckeditor_fontawesome is available for TYPO3 v10 and v11 (CKEditor 4) as a stable extension. For TYPO3 v12 (CKEditor 5), adaptations exist because the plugin architecture is completely new. CKEditor 5 uses a modern JavaScript module system instead of the CKEditor 4 plugin API.

For TYPO3 v13 and beyond, Gosign recommends a fundamental reassessment of the approach. Instead of loading FontAwesome as a webfont, modern websites use SVG icon systems: every icon is embedded as inline SVG, only the used icons are loaded, file size drops from 300 KB to under 10 KB. For editors, a custom CKEditor widget can be developed that lets them select icons from an SVG sprite.

The migration effort from FontAwesome to SVG icons is typically 2 to 3 days: create SVG sprite, adapt CKEditor widget, replace existing <i> tags in content with <svg> references. Gosign automates the last step through a migration script that identifies all <i class="fa-*"> tags in the database and rewrites them.

When deciding between FontAwesome and SVG icons, the numbers tell a clear story: FontAwesome Free contains over 2,000 icons, FontAwesome Pro over 7,000. A typical corporate website uses 15 to 30 of them. All visitors pay for the rest in loading time. A custom SVG sprite with 30 icons weighs 8 to 15 KB - one-fiftieth of the full FontAwesome library. For websites optimized for Core Web Vitals and PageSpeed, the decision is clear.