We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Font Awesome & SPPB, unable to use FA icons as CSS Pseudo-Elements after latest update

Featured Lock Resolved Issue
Hi, since the latest updates it is not possible anymore to use FA icons with CSS pseudo-elements, as shown here https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements


  • This has happened on both the websites I have built using SPPB & Helix Ultimate.
  • I have also noticed the issue on another website built with SPPB but using a completely different template framework.


Thus, I am sure it is a SPPB issue, and a quite frustrating one as FA icons are breaking up and the UX looks very poor.

Please advise.

(Joomla 3.9.14 / 3.9.15 - SPPB latest version - Helix Ultimate latest version)

Thanks,
Alex

11 Answers

Pavel

More than a month ago #Permalink
Hi.It is still possible. If the icon is not displayed, add the font-weight property, and you get it.
1.jpg

Attachments (1)

  • 1.jpg
    1.jpg 56.7 KB

Alexander I.

More than a month ago #Permalink
Hi Pavel, thanks for the reponse!

I have read the FA migration guide and am aware of this requirement.
I do not understand though why it is not working, and pseudo-element FA icons still appear broken.

Also, Helix Ultimate seems to load the same FA scripts as SPPB, so everything is loaded twice. Isn't this an issue?

Pavel

More than a month ago #Permalink
Just yesterday, I have decided this issue by reading the instructions on the FA 5 website. I got it working on Helix Ultimate and SPPB, without any problems.

Pavel

More than a month ago #Permalink
Here, I've just checked it, especially for you (HU + SPPB)
1.jpg

It is possible that something is wrong with your code?

Attachments (1)

  • 1.jpg
    1.jpg 543.4 KB

Alexander I.

More than a month ago #Permalink
Ok, I caught the issue:

If you use


font-weight:900


it works fine, but I was using


font-weight:400


because I have a FA Pro license and was reading the Pro-associated documentation while logged into my FA account (silly me).

Since HU & SPPB do not use FA Pro but FA Free (well I thought I knew that but it just hit me), there is no option of font-weight -you can only go full bold or not at all.

A small apology on my part for not catching this earlier. :)

Do you think there will be an option to use FA Pro (e.g. for FA Pro license owners) in a future version of SPBB? It would be really cool :)

Best regards,
Alex

Pavel

More than a month ago #Permalink
Do you think there will be an option to use FA Pro (e.g. for FA Pro license owners) in a future version of SPBB? It would be really cool

I am not an employee of Joomshaper. Just a user like you. But I saw somewhere on the forum that this feature is on the roadmap.

Alexander I.

More than a month ago #Permalink
Aaah, ok Pavel, sorry then.

Thanks for all the help and info, have a great day!!!

Paul Frankowski - Staff

More than a month ago #Permalink
For now, we used FA Free only -- maybe in the future we will think about PRO, but not now.
---
I agree that FA developer made a lot of unnecessary confusion with FA4>FA5 migration.
but as always money... he wanted to force PRO sale
---

Thanks Pavel, I forgot to tell you that we put some info about that in SPPB Documenation > Icons (FontAwesome 5)
https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3#documentation-heading-1_7

Alexander I.

More than a month ago #Permalink
Thanks for the answer Paul.

FA is an awesome product and FA Pro is even cooler. It would be nice to use it in my SPPB projects, but then again it is not a deal-breaker.

Could you please give me your opinion if loading the FA library twice (1x from HU + 1x from SPPB) is a performance issue? In my view it most definitely is, but I understand that if I disable FA loading in SPPB then I will also have back-end issues (https://www.joomshaper.com/forums/not-able-to-delete-disable-copy-or-paste-row-in-back-end-icons-disappeared)

Best regards,
Alex

Paul Frankowski - Staff

More than a month ago #Permalink
Alex,
yes, we both notice that, as I heard from the developer it should be fixed in one of the upcoming updates.
We have to force loading FA on the back-end only.
Then you will be able to disable FA from SPPB Options.

Alexander I.

More than a month ago #Permalink
Amazing, thanks again!


There are no replies made for this post yet.
Be one of the first to reply to this post!

123

Templates

327663

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us