Font Awesome for JCE

Downloaded 178 times
Version 1.1.4
Released On
Updated On
File Size 42.75 Kb
MD5 Signature 4e878019edafde6fb849dbb3dd445407
Licence GNU General Public License, Version 2 or later

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.

Add the FontAwesome icon to the editor toolbar

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

Set Fontawesome parameters

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.

Set Font Awesome plugin parameters

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.

Using FontAwesome in the editor