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

By default, the editor uses the version of Font Awesome included with Joomla to display icons while editing:

• Joomla 4 uses Font Awesome 5
• Joomla 5 / Joomla 6 use Font Awesome 6

You can optionally specify one or more custom Font Awesome stylesheet URLs for the editor to use instead. These URLs should be relative to your site root and may, for example, point to the Font Awesome files included with your template, such as:

templates/shaper_helixultimate/css/font-awesome.min.css

Multiple stylesheet URLs may be added to load specific icon styles (for example Regular, Brands, or Duotone), which helps keep the icon list fast and responsive in the editor.

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 stylesheet URL or list of multiple stylesheet URLs can also be added.

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.