Effortlessly select and insert Font Awesome icons into your content ensuring seamless front-end display in supporting Joomla templates.

Installation

Install using the Joomla Extensions Installer - https://docs.joomla.org/Installing_an_extension

After installation, assign the plugin to an Editor Profile in Editor Profiles -> Features & Layout by dragging the icon into an editor toolbar row.

Configuration

In Editor Profiles -> Plugin Parameters -> FontAwesome, set the FontAwesome Version - 5 or 6 - you are using on the site.

By default, the editor will use the version of Font Awesome included with Joomla (Font Awesome 5 in Joomla 4 and Font Awesome 6 in Joomla 5) to display the fonts while editing. Set an optional URL to an alternate version for the editor to use, relative to you site root. This might be the Fontawesome version included with your template, eg: templates/shaper_helixultimate/css/font-awesome.min.css

In Joomla 4 or later, with JCE Pro 2.9.50 or later, the plugin can load either a local stylesheet version or a CDN version of Font Awesome in the site front-end to test display or for more permanent use. This can be enabled in the plugin's parameters in System -> Manage -> Plugins, by setting the Load FontAwesome CSS to Yes. An optional URL to an alternate Font Awesome version can also be set.

If you template does not include Font Awesome, you may be able to load it in the front-end by adding the following to the template's custom.css file (or user.css file for Cassiopeia based templates). Adjust the URL values based on the location of the custom.css or user.css file.

@import url('../../../../vendor/fontawesome-free/css/fontawesome.min.css');

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    src: url('../../../../vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url('../../../../vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
}

Usage

Find and select the required Font Awesome icon using the Font Awesome list in the editor toolbar. Filter the list options by typing in the input field.