some Awesome Fonts are not showing in production

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 Online

Official support hours

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

#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

Monday, 02 October 2023 14:30 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

Monday, 02 October 2023 14:59 BST

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.

Monday, 02 October 2023 15:13 BST

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

Monday, 02 October 2023 16:07 BST

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.

Monday, 02 October 2023 16:24 BST

rital

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