Icons doesn't showing

Hello,
on my web page I lose icons for example in: home icon and arrows in breadcrumbs, Hamburger in navigation for mobile, Arrows for quick scrolling to top.

page is: https://skolabreaku.sk/

I tried to change fonts, clean cache, use default fonts…

Hi Jakub,

Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If the issue persists, please provide us with the admin access to your site in a Secure Note:

Hi @Jade,
Yes I tried to turn it off all plugins and still were icons missing.
There is my Secure Note.
Thanks

Hi Jakub,

There’s a custom css that you added that caused the issues, it’s this css here.

[data-x-icon]:before, [class*="x-icon-"]:before {
    content: attr(data-x-icon);
    line-height: 1;
    font-size: 18px;
}

You missed the s in data-x-icon-s. Try to update that css to

[data-x-icon]:before, [class*="x-icon-"]:before {
    content: attr(data-x-icon-s);
    line-height: 1;
    font-size: 18px;
}

Hope that helps.

Thanks!

@albrechtx works very great now. Thank you so much guys!!

Hey Jakub,

The custom code is not needed as it is already added in the theme and your custom CSS can conflict with others. If you only want to change the font-size of the icons then remove the above code and use this one only:

[data-x-icon]:before, [class*="x-icon-"]:before {
    font-size: 18px;
}

Otherwise you can simply remove the custom CSS to make things work again. Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.