How do you now edit the icon for a menu?

Hi!

Would you mind posting a link to your site?

Thanks!

Hannah

Sorry would rather not add the site due to linkages being made.

Here is a code snippet of part of the menu:

<div class=”widget-1 widget-first footer-widget”><aside id=”nav_menu-3″ class=”widget widget_nav_menu”><ul id=”menu-footer-menu-2″ class=”menu”><li class=” menu-item-481″><a href=”https://www.mysite.com/ordering/”><i class=”icon-truck”></i><span>Ordering</span></a></li><li class=” menu-item-6920″><a href=”https://www.mysite.com/sustainable/”><span>Sustainability</span></a></li></ul&gt;

and chatgpt scarily suggests this as a solution:

You can use JavaScript to search for a specific class, such as menu-item-6920, and add a new class to an i tag within that element. Here is an example of how you can do this:

JavaScript

This code is AI-generated. Review and use carefully. Visit our FAQ for more information.Copy

// Find the menu item with the class 'menu-item-6920'
var menuItem = document.querySelector('.menu-item-6920');

// Create a new 'i' element
var icon = document.createElement('i');

// Add the 'icon-class' class to the new 'i' element
icon.classList.add('icon-info');

// Insert the new 'i' element before the first child of the menu item's 'a' element
menuItem.querySelector('a').insertBefore(icon, menuItem.querySelector('a').firstChild);

This code finds the menu item with the class?menu-item-6920, creates a new?i?element, adds the?icon-class?class to the new?i?element, and inserts the new?i?element before the first child of the menu item’s?a?element. You can modify this code to target a different menu item or add a different class to the?i?tag.

This works ??

I suppose what I’m then asking – is this the best work around for menu icons in the theme now?

Thanks

Hi there!

The page you sent doesn’t load.

Here are the steps to add icons to the menu items:

1. Make sure that you can add CSS classes for each menu item. If you can’t see the option, expand the Screen Options at the top-right corner of the Menus edit page.
   
2. Add the class of the icon that you want to use. For reference, here’s the link to the icons – https://themes.kadencethemes.com/virtue/icons/
   
3. For the widgets, add the Navigation Menu block by adding the “Legacy Widget”.

Here’s a screen recording – https://share.getcloudapp.com/NQup2eW4.

I hope this helps, and let us know if we can help you further.

Regards,
Karla