Icons don't show up

[ceewu]

Hi guys,

My icons don’t show up at all - either in Elementor or on the blog. The link is http://blog.my9.com.tw/firean-whisky/

It’s becoming an issue as my hamburger menu on mobile is showing a box with a cross on it. Please help!

[basanta]

Hi There,

Thanks for writing in!

The issue is due to the language plugin that you have used on your site. Which is overwriting the Icon font CSS.

I am not sure why this language plugin adding this CSS, you can check the setting pf the plugins.
Another way to fix it to overwrite the CSS. Please add this below CSS to your X -> Theme option -> Global CSS
Let us know How this goes.

[data-x-icon], [class*="x-icon-"] {
    font-family: "FontAwesome" !important;
}

Thanks

[ceewu]

@basanta

[data-x-icon], [class*=“x-icon-”] {
font-family: “FontAwesome” !important;
}

That worked perfectly, thank you! I’ll also double check my plugin settings.

How would I style the hamburger menu if I want to add a word “MENU” underneath the 3 lines? And the menu that appears, it’s transparent underneath, how do I change the styling or delete the “ASSIGN A MENU” that appears? Thanks again basanta!

[rad]

Hi @ceewu,

You mean remove the hamburger menu too? Not assigning a menu means it’s no use. But, please add this CSS as well for Menu wording and styling of the transparent area.

.x-btn-navbar i:after {
     content: "MENU";   
     display: block;
     font-size: 9px;
    }
    .x-btn-navbar i:before {
font-size: 30px;
     }

.x-nav-wrap.mobile {
    display: block;
    background-color: rgba(0,0,0,0.5);
}
    
    .x-nav-wrap.mobile .x-nav {
     margin: 25px;
    }

Hope this helps.

[ceewu]

Thank you @Rad! I meant if I wanted to change the 3 lines of the Hamburger Menu to just words or another icon. Really appreciate your help guys

[ceewu]

Hi @Rad, just found this thread which answered my question: https://theme.co/apex/forum/t/change-hamburger-icon-for-menu-on-mobile-nav-right-size-heading-text/2927/3

But I’m trying to change it to a wine glass icon (\f4e3 https://fontawesome.com/icons/wine-glass?style=solid) - but only a square box is showing up. Would I need to change or embed anything? Thanks!

[Alaa]

Hi @ceewu

This wine glass icon is included in Font Awesome version 5.0.9 which isn’t included in the current theme version, following this guide might help you to include a recent version of Font Awesome.

Thanks.