WYSIWYG editing in Joomla 5 with Font Awesome 6
Joomla 5 ships with Font Awesome 6 and Bootstrap 5 baked in, giving you a rich palette of icons and layout utilities right out of the box. The catch is that Joomla's default editors don't render either of them in the editing pane, so you're essentially working blind until you hit publish. JCE Pro solves that with a single configuration change, turning your editor into a genuine WYSIWYG environment where icons, buttons, and Bootstrap styling all appear exactly as they will on the live site.
TL:DR – The short version: the ability to switch between code view, editor view, and a fully styled preview — seeing your articles exactly as they'll appear when published, Font Awesome icons and all — makes JCE Pro worth the subscription fee for anyone who publishes regularly.
Contents
The problem: editors that don't speak Bootstrap or Font Awesome
Joomla standardised on Bootstrap and Font Awesome several major releases ago, and the combination is genuinely powerful. Font Awesome 6 alone ships with thousands of icons across its free and Pro tiers, and the free set bundled with Joomla covers the vast majority of everyday use cases. The problem is that neither TinyMCE nor the other editors included with Joomla out of the box load the front-end stylesheet inside the editing pane. Type an icon class like fa-solid fa-joomla and you'll see raw text rather than the rendered glyph. The same goes for Bootstrap button classes — you're guessing at the final appearance until you preview or publish.
For TinyMCE there is a partial workaround: adjusting the editor configuration to stop icons being stripped out of Joomla articles on save. That keeps your markup intact, but it still doesn't show you the icons while you're writing. JCE Pro goes further by loading your site's actual stylesheets inside the editor, so what you see really is what you get.
Font Awesome in Joomla 5 — what's included
Joomla 5 bundles Font Awesome 6 via a dedicated system stylesheet at media/system/css/joomla-fontawesome.css. This file is loaded automatically on the front end, which means any icon classes you use in your articles will render correctly for visitors without any extra configuration. The icon syntax moved on from Font Awesome 4's fa fa-* shorthand — current usage follows the fa-solid fa-*, fa-regular fa-*, and fa-brands fa-* pattern, reflecting the style-prefix approach introduced in version 5 and carried forward into version 6. If you're maintaining older articles that still use the legacy fa fa-* syntax, Joomla includes a shim for backward compatibility, but it's worth updating to the current classes when you have the opportunity.
Because Joomla manages Font Awesome centrally, your icon code is template-independent. When Joomla ships a Font Awesome update, every article on your site benefits automatically — you don't need to touch individual articles or update a CDN link in your template.
JCE Pro — the fix
JCE Pro is the commercial tier of the Joomla Community Editor, itself built on TinyMCE. It adds a preview pane, a file manager, a media manager, and a collection of editor plugins that make working with Joomla content considerably more comfortable. The Font Awesome plugin — included with a Pro subscription — gives you a searchable icon picker so you can browse and insert glyphs without memorising class names.
Pricing for JCE Pro is subscription-based, and the model is generous: a single annual subscription covers unlimited sites, and any version released during your subscription period remains yours to use after it lapses. Check the JCE website for current pricing, as it has changed since this was first written. If you're on the fence, the free version is fully functional for everyday editing — try it for a while before committing to Pro.
Installing JCE Pro
Installation follows the standard Joomla extension workflow. Register on the JCE website, purchase a subscription, download the installer package, and install it through the Joomla Administrator's Extension Manager. Add your subscription key in the JCE settings to enable automatic updates. While you're in the downloads area, grab the Font Awesome plugin for JCE — it installs the same way and adds the icon picker to your editor toolbar.
Configuring JCE Pro to render Font Awesome icons
- Go to Components > JCE Editor in the Joomla Administrator
- Open the editor profile you use — Default for most setups
- Navigate to Editor Profile > Editor Parameters > Typography > Editor Styles
- Set Editor Styles to Add
- In the Custom CSS File field, enter:
media/system/css/joomla-fontawesome.css - Save the profile
That's all there is to it. From this point on, Font Awesome icons render live in the editor pane and in the preview, so you can see exactly what your readers will see before you publish. Because the path points to Joomla's own system stylesheet rather than a third-party CDN or a copy bundled with your template, the icons stay in sync whenever Joomla ships a Font Awesome update — no further maintenance required on your part.
If you manage multiple editor profiles — for example, a restricted profile for contributors and a full-featured one for editors — apply the same CSS addition to each profile where you want icon previews to appear. The setting is per-profile, so you have fine-grained control over which users see the styled preview.
