Awesome Icons outside gridbox are not loading right

Hello,

When I open a page created in Gridbox the icons (type: material.woff) are displaying themselves perfectly. If I go to a page outside Gridbox, for example a login page from Joomla, the icons are replaced by some weird sequence of characters, see attachments. I tried to load the page without the custom CSS but this doesn't change the issue. The site is on localhost so can't show a live page. Thank you.

Hello,
Thank you for contacting us

Describe in more detail where these icons are located (header, footer, page content).
Describe in as much detail as possible how we can repeat it.

Best Regards,
Vyacheslav, Balbooa Support Team

The icons are located in the footer. The footer is build up out of 3 rows, 2 of them have a buttun app installed, presented with icons and text. 1 row has the icon app installed, this is the one showed on the printscreen.

It works fine in all gridbix pages, but if I visit pages from the Joomla system itself, like "login", "profile", and "signup", then the icons shows themselves all scrambled. The icons in the buttun app shows themselves correctly.

This is recently, I never saw it before. As I mentioned before, I tried to load the page with clean cache and without browser cookies. I loaded the page without custom css codes. I tried different icons in the icon app. I replaced the icon app for another app to see if it also would show any deviant behavior, but it worked fine. I don't know what else I can try. Thank you.

We checked and could not repeat the problem, everything works well


Best Regards,
Vyacheslav, Balbooa Support Team

Thank you for trying to help me out.

In Devtools (see attachsments) I get two different codes.
On the pages the icons are correctly working we get the codes:

.zmdi-facebook:before {
content: '\f343';
}

.zmdi-instagram:before {
content: '\f34f';
}

.zmdi-vimeo:before {
content: '\f404';
}

On the non-gridbox pages where the icons not showing themselves correctly, Devtools shows the code:

[data-icon]:before {
font-family: 'IcoMoon';
content: attr(data-icon);
speak: none;
}

If I uncheck the font-family and content in Devtools the icons show themselves correctly.
How can I solve this? Why does it show "IcoMoon" if I use "Material Icons".

Is there a CSS code to solve this? Thank you.

You need to add CSS code in the code editor
Regards,
Vyacheslav, Balbooa.com

Thank you for the code.

It changed the family font as you can see the attachment, but it doesn't show the icons perfectly yet.
As you can see in Devtool, if I uncheck the "content: attr(data icon);" line, then the icons are visible.
I don't know how to correct this with CSS.

Thank you for your help.

You need to add this css code at the code editor:
Best Regards,
Vyacheslav, Balbooa Support Team

Thank you, it worked!

Did anyone ever told you that you are the best? You are

You are welcome

Best Regards,
Vyacheslav, Balbooa Support Team