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.

#114774 some Awesome Fonts are not showing in production

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 rital on Monday, 02 October 2023 16:24 BST

rital
Hi, I would like to use the facebook and instagram awesome icons - I can select, see the icon in the editing page - but they show as not found in production; whereas if I select awesome font icon such as phone, envelope, etc - they show fine.
Is it that sociale media icons no longer work ?
I am using JCE Editor last versione - even installed to beta1 released today
as well as plg_jce_editor_fontawesome_111
but even though all is updated to the last - I cannot get it working - I would like to use the font instead of making images.
Examples of what is not showing in production: <span class="fa fab fa-facebook"><span class="fa fab fa-facebook-square">
thanks in advance
Rita

Attachments

Ryan
Please post a link to an example article on your site.

Ryan Demmer

Lead Developer / CEO / CTO

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

rital
Hi Ryan,
the site is https://test.rossignoli.net/ (just started - so no formatting done so far)
I have just made the site online for your purpose
k regards
Rita

Ryan
It looks like the CDN version of Font Awesome declares the "Brands" css rules first, then the regular css rules, so any brand icon that also use the "fa" css class will be overwritten by the regular icon font, eg:

<span class="fa fab fa-facebook-square"></span>
includes the "fa" class name, and removing it will show the icon, but including the fa class name is required to get the icons to show in the editor. I will have to look into a solution for this, but you could try adding the following to your template stylesheet's custom.css file (or user.css file):

.fa.fab {
    font-family: "Font Awesome 5 Brands";
}

Ryan Demmer

Lead Developer / CEO / CTO

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

rital
Thank you very much for your prompt solution for me.
kind regards
Rita