Icons missing from Navigation after updates

The icons in my navigation are missing since the latest updates.

  1. There used to a ‘home’ icon on next the word home.

  2. The mega menu had icons in front of all the links to other pages.

Thank you for assisting with this issue.

Todd

Hello Todd,

Thanks for asking. :slight_smile:

Mega menu icons are showing up fine on my end. However, I can confirm that home menu icon is not getting displayed. You can add following CSS under X > Theme Options > CSS:

.x-icon-home:before {
    content: "\f015" !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thank you for the reply.

I have tested the mega menu icons on all browsers and I can not see them. I also tried from a different location -work- and got the same results. No icons.

Please have a second look at the megamenu icons in different browsers and you should see the same thing. No icons.

Thank you again.

Todd

Hey Todd,

The code @Prasant gave was for your home icon. You will need to use that code as a framework for the rest of your icons. You can get the unicode of FontAwesome icons in their website. As an example, here’s the link for the home icon.

The reason why your setup or the icons work in the past is because all of icon CSS was added in X. That was a significant addition to page load though so it was not good for performance. Unless you learn like @Prasant suggested, your setup is not recommended anymore as you will need custom CSS which we could not always give.

I’d recommend you use UberMenu so you could setup an icon without the use of CSS. See https://sevenspark.com/docs/ubermenu-3/content/icons

Thanks.

Thank you for the solutions stated.

This was all working with NO additional CSS before the latest updates.

I must now decide what changes I want to make.

Please let us know before we update if such changes will be mandatory.

Thank you.

Hi,

You can check our changelog before updating. All changes being done are added there in detail.

https://theme.co/changelog/

Thanks

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