You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#113602 How to add Font Awesome icons with JCE ?

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Monday, 18 September 2023 11:46 BST

Saturday, 22 April 2023 13:58 BST

Django29
Hello.
Simple question (hoping simple answer 🙂 ) : how can we add Font Awesome icons in our content with JCE ?
Font Awesome is already enabled with my template (Helix).

Sunday, 23 April 2023 12:10 BST

Ryan
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: https://camo.githubusercontent.com/6def6da5480d3a3a5b8d7c66d10f5e29b24360e62f84bb5906df3b104701dd88/68747470733a2f2f63646e2e6a6f6f6d6c61636f6e74656e74656469746f722e6e65742f746d702f666f6e742d617765736f6d652d6164642e6a7067

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Sunday, 23 April 2023 13:33 BST

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

Monday, 24 April 2023 08:47 BST

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

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 23 June 2023 16:15 BST

IDD-NET.DE
[quotePost id="113606"]You can use this JCE plugin -

Friday, 23 June 2023 16:21 BST

Ryan
[quotePost id="114023"][quotePost id="113606"]You can use this JCE plugin -

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 05 July 2023 22:38 BST

ernienet
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

Wednesday, 05 July 2023 23:22 BST

ernienet
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

Thursday, 06 July 2023 09:31 BST

Ryan
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. https://cdn.joomlacontenteditor.net/tmp/113602-how-to-add-font-awesome-icons-with-jce.jpg

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 07 July 2023 18:05 BST

ernienet
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

Thursday, 13 July 2023 15:29 BST

ernienet
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

Saturday, 22 July 2023 15:12 BST

IDD-NET.DE
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

Thursday, 14 September 2023 01:45 BST

trogladyte
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.

Monday, 18 September 2023 11:46 BST

Ryan
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.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.