SOLVED: Default Font Awesome icon of component not working

Browser: Chrome 110
OS: Windows 11

I’ve added an icon to my component and set a default Font Awesome regular icon.
Whenever I use this icon I’ll see the default, but in the front-end Font Awesome isn’t actually loaded. It’s not until I actually set the icon instead of relying on the default that it is loaded.

Hello @Gerben,

I’ve tried to replicate it, but I couldn’t. If I connect a property to the Icon control, and set a default one, it will render.
What do you mean by “Font Awesome” is not actually loaded?

Thanks,
Matej

1 Like

Hi @Matej
Thanks for checking!

What I mean when I say Font Awesome isn’t being loaded is the fact that I don’t see the script loaded in my network tab. When it is working I can see the CSS file (themes/bricks/assets/css/libs/font-awesome-6.min.css) actually being loaded.

Now, I’ve done some more digging and just noticed I failed to realize that I’m loading my component inside of a template. The template is being included in my page using the “Template” element in the builder.
As soon as I use that same structure directly, so not using a template element, it does work. Hope that helps you reproduce this issue! :slight_smile:

Hi @Gerben,

thank you for this. By creating a component inside a template, and then using the template on the page, I was able to reproduce the issue and I’ve added it to our local bug tracker.

Thank you.
Matej

Alright, good to hear. Thanks Matej!

Any news on that issue? It’s also there in 2.0 beta.

Hi @Maexxx,

if all goes according to the plan, it should be solved in the next version.

Best regards,
Matej

Hi guys,

We fixed this issue in Bricks 2.0 RC, which is now available in your account.
Changelog: Bricks 2.0-rc Changelog – Bricks

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

@timmse this still seems to be a thing on version 2.0.1

If the glyph is part of a component the stylesheet for that glyph family is not loaded.

Loading the same glyph family outside of a component works.

1 Like

Hmm, I can’t seem to replicate the issue anymore.

So, you can replicate it by creating a component with the icon, then choosing some default icon there (like Font Awesome regular), and you use this component on the page.

And the icon will not be loaded on frontend?

Matej

This is happening on my local install.

Tried on the bricks sandbox and cant replicate it there.

Also check you are not loading the icon set for some othe reason (say hamburger menu…)

Hi,

yep, I can confirm that if I don’t use icon, font-awesome styles are not loaded. As soon as I add an icon element inside the component, styles are there.

And because you could not replicate it on Bricks playground, I would say there is some issue with your local install.

I’m not sure how I could check it though, as it’s local.

Matej

I actually got it to break on the playground too.

Trying to reproduce it, but I think it’s related to the component save process.

1 Like

Hmm. Please let me know then if you can replicate it again with reproducible steps. I tested again, still couldn’t. :frowning:

Thanks,
Matej

of course i will… it happens pretty consistently on my mamp install but i only got it to break twice in the playground.

On my install it breakes even with no additional plugins and stuff running.

Exporting and importing the component seems not be a way to reproduce it. Maybe i could provide you a dump or a remote copy.

Wouldn’t it be worth to inspect the dependency check process tho?

I did not dig the code yet but I’d expect a failure of some kind in dependency queue creation when working with components.

Hi @mofo,

yeah, so it looks like there is a way to replicate it. I would prefer to check it on a Bricks Playground or your staging website rather than have you send me a remote copy.

I’ll inspect the codebase a bit though, but it’s hard(er) without being able to replicate it. Must have been some edge case.

Matej

Oook, so got the assets.php file to output of the $bricks_settings_string right before icons sets loaders are checked.

ThenI dug the serialized values for the component from wp_options and the very same un-component-ified item from the wp_posts post_content

Searching for the two element ids only tracks back to the one in the page content, so $bricks_settings_string would fail the match for the themify icon set if only the component was left there.

For some reason the component is not loaded before the check. I guess I’ll have to check the get_component_instance calls…



Aside from this… it’s weird you can force it to load it by adding the font family to a dummy element in the theme styles section but not via the bricks core settings custom CSS field. :upside_down_face: