In Editor Profiles -> Editor Parameters -> Typography, set Editor Styles to Add, and in the Custom CSS Files field, add

templates/$template/css/font-awesome.min.css

Example:

OK. I did this, but then, how to add a font-awesome icon in the editor ?

You can use this JCE plugin - https://github.com/widgetfactory/jce-editor-fontawesome

Quoted from Ryan on Monday, 24 April 2023

You can use this JCE plugin - https://github.com/widgetfactory/jce-editor-fontawesome

Unfortunately, you get a 404 error message.

Quoted from IDD-NET.DE on Friday, 23 June 2023

Quoted from Ryan on Monday, 24 April 2023

You can use this JCE plugin - https://github.com/widgetfactory/jce-editor-fontawesome

Unfortunately, you get a 404 error message.

The url should be accessible again.

I tried to set this up but I don't think I understand the part in GitHub where it says, "This plugin requires that Font Awesome 6 is already available and loaded in the editor content via your template stylesheet."

I'm using a Gantry 5 Template in Joomla 4. I know that Font Awesome is installed, but I'm not sure it's version 6.

When I try to insert a Font Awesome font from the toolbar, it just creates a single space - like a placeholder for the element, but it's not visible. In the HTML I see the code:

<span class="fa fa-check-circle"></span>

but the image is not showing. Maybe the template doesn't have the right version of Font Awesome, or I don't have it set up correctly in JCE.

Thank you,
Ernie

I have a query out to the template developer because they have a way to manually add FontAwesome to their template with an override. When I have an answer from them, it might help resolve this issue.

Meanwhile, any assistance you can provide will be helpful.

Thank you,
Ernie

I'm using a Gantry 5 Template in Joomla 4. I know that Font Awesome is installed, but I'm not sure it's version 6.

Version 5 and 6 are both supported.

but the image is not showing. Maybe the template doesn't have the right version of Font Awesome, or I don't have it set up correctly in JCE.

The template is probably loading the fontawesome stylesheet dynamically in the front-end. If it is not included as an import in the template stylesheet, then JCE won't load it into the editor.

Go to Components -> JCE Editor -> Profiles, and click on the main profile, eg: "Default" to edit it.

Click on the Editor Parameters tab, then on Typography.

Select Add from the Editor Styles list, and in the Custom CSS Files field, paste in:

media/gantry5/assets/css/font-awesome.min.css

Click Save.

The editor should now load the Gantry template files and the fontawesome css.

I added the new Custom CSS file as shown, then set the template to use Font Awesome 5. It now works in the editor, however, there are several icons that won't display.

I'm not sure if that's because there are a lot more icons in Font Awesome 6, or that you're displaying the paid version icons for version 6.

The template developer provided detailed instructions for me to get the free version of Font Awesome 6 loaded into the template, but I'm awaiting some clarification from them.

I'm getting closer and hope to have it working smoothly on all my sites soon.

Thank you,
Ernie

Working with RocketTheme's support and with what I learned here, I was able to get it working.

I had to use the all.min.css file instead of font-awesome.min.css to make it work.

Installing it in the Gantry folder didn't work, so I installed it in templates/rt_studius/custom/fontawesome6 and uploaded all the Font Awesome 6.4 folders there.

I may try installing it in templates/fontawesome6 to see if that works so that if I ever decide the change templates, JCE's Font Awesome setup won't be affected.

Thank you,
Ernie

Works so far for us to, with plugin and the fontawesom.min.css.

But it only shows an empty region/square instead of the symbol it self. Backend works fine.

Also we didnt have the editor styles "ADD" we only can choose between - standard (nothing is showing up), template (everything from the template) and own css.
So fontawesome works more or less, but the template.css styles are not showing up, till I manually insert the css again.


Regards

I've used this plugin in a couple of sites. The HUGE downside of this is that, when you click the dropdown, the icons appear to be in no logical order - the names are all jumbled up and seem to follow no logical sense. Neither do they show the actual icon; it requires trial and error, trial and error, to get what you want. Don't get me wrong, this is leaps and bounds ahead of doing it manually, but it could be SOOOOO much more.

the icons appear to be in no logical order - the names are all jumbled up and seem to follow no logical sense. Neither do they show the actual icon; it requires trial and error, trial and error, to get what you want

I'm working on this, but it is quite difficult to get right. The next update will extract the actual list of icons from the stylesheet they are listed in, rather than from a list included in the plugin code. This will most likely list them in alphabetical order, and with the list filtering autocomplete, should make it easier to find an icon.

As for icon display in the list, this is quite tricky, as the list is in a different page to the editor content, so the list has to use some other stylesheet to display the fonts, without creating a conflict with the Joomla UI (which also uses fontawesome). The logical solution here is to use the Joomla fonteawseome stylesheet, which currently uses Fontawesome 5, but this is presenting some difficulties that need to be resolved.