[Resolved] Font Awesome 5 Pro icons not loading correctly in Beaver Builder

[Author]

Posts

[saint]

Hi all,

There seems to be an issue/bug(?) with the way Font Awesome 5 Pro is loading. I recently updated from FA4 to FA5 Pro, and after some discussions with BB support, it sounds like there might be some issues w/ OTG's icons CSS.

hidden link

Please let me know if the fix in the video will be fine to resolve it, or if I need to do additional tweaks on Toolset's side.

Thanks!

[Christian Cox]

Hi, our current system uses Font Awesome v4 which could cause conflicts if you plan to update to Font Awesome 5. We have an internal ticket in our system to update to the latest version of Font Awesome, but I don't have an ETA available for that release just yet. I'll be glad to keep you posted through this ticket as I hear more information.

[saint]

Hi Christian,

Thanks for the quick reply. Is there anything I can do in the meantime to make sure that the Toolset FA4 is compatible with my FA5 Pro?

I'm seeing lots of blank square icons intermittently and hoping to get this squared away our launch.

Much appreciated.

- Bill

[Christian Cox]

At this point the best way to proceed is to use icons that are supported by FA 4 and avoid icons that are new in FA 5. One other thing you can try is to add this custom code that dequeues the Toolset Font Awesome library:

add_action( 'wp_enqueue_scripts', function() {
 wp_deregister_style('font-awesome');
}, -1 );

[saint]

Hi Christian,

Got it - I'll add that code snippet in and see what happens. Could I add it in the "Toolset Custom Code" section rather than my Functions.php of the child theme?

Do we know when FA5 and FA5 Pro will be coming to Toolset?

[Christian Cox]

Could I add it in the "Toolset Custom Code" section rather than my Functions.php of the child theme?
Yes, that should be fine.

Do we know when FA5 and FA5 Pro will be coming to Toolset?
No, I don't have an ETA available for that just yet. I'll be glad to keep you posted through this ticket as I hear more information.

[saint]

Thank you Christian! I will await your update once FA5 gets into Toolset.

[saint]

Hi Christian,

Following up on this item, I de-queued Toolset's FA4 based off the code below, and when I realized the icons were completely gone, I disabled it. But now, the icons are all gone: hidden link.

<?php
/**
 * New custom code snippet.
 */

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

add_action( 'wp_enqueue_scripts', function() {
 wp_deregister_style('font-awesome');
}, -1 );

I've cleared BB cache just to eliminate that issue, but so far the icons haven't came back. I've also installed a Font Awesome plugin on the suggestion of FA author, as they're suppose to have a "v4 to v5" shim, but so far that also hasn't resolve it just yet.

Please let me know if you have any questions.

Thanks,

[saint]

Attached a quick screenshot of what I mean see as well when I open up and try to assign a field.

[saint]

Hi Christian, thanks for re-opening this item.

[Christian Cox]

Following up on this item, I de-queued Toolset's FA4 based off the code below, and when I realized the icons were completely gone, I disabled it. But now, the icons are all gone:
If the icons disappeared after activating the code I recommended, then did not reappear after deactivating the code I recommended, it's either a cache issue or something else is going on. If you already cleared BB cache, try clearing your browser cache as well. If you are still having trouble seeing icons, please deactivate all custom code, all non-Toolset plugins, and activate a default theme like Twenty Seventeen. Then clear your browser cache, clear your BB cache, and test again.

[saint]

Hi Christian,

Please see below links for my experience when I went ahead and de-activated all custom code, non-Toolset plugins, and switching it to Twenty Nineteen theme.

hidden link - This shows what I see when presenting frontend icons
hidden link - This shows the Toolset icons that I see on the backend when I add Custom Fields

Best,

[Christian Cox]

Unfortunately I can help you implement FA 4 icons, but with FA 5 in the mix, icon support is no longer available through Toolset support. You're asking me to help you implement FA 5 icons by overriding Toolset's core functionality in some way. Our support policy prevents me from providing you with assistance to do this, because:
1. There is no public API to control Toolset's Font Awesome version or implementation.
2. Toolset uses FA 4 and does not yet support FA 5. Support for FA 5 constitutes a new feature, and we do not help develop new features in the support forum.

https://toolset.com/toolset-support-policy/

[saint]

Hi Christian,

Thanks for your help so far. Just as an update in case you run across this with others, I worked with Font Awesome support, and they've uncovered a bug where it was clashing with how other plugins were calling FA5. They've since fixed that and updated it.

There are some other items that I'm still working through that may have some Toolset impact, but letting you know in case it comes up again elsewhere. Will keep you updated.

Thanks!

[Christian Cox]

Hi, just a quick update to let you know FontAwesome 5 support has been added in the latest releases of Toolset plugins! You can find the FA configurations now in Toolset > Settings > General tab.