The Menu Icons plugin gives you the ability to add icons to your menu items and should work with most classic WordPress themes.
The plugin can be installed from the WordPress Dashboard. Search for Menu Icons by ThemeIsle.
To use this plugin, open the Menus page in the Appearance section. If you don’t see a Menus link, then you are probably using a Full-Site-Editing theme, in which case you can’t use this plugin.
In the Menus page, there is the Menu Icons Settings panel.
You can enable or disable several icon libraries. Keep in mind that each checkbox will load an extra CSS file for all your visitors. So it is best to limit yourself to only one library.
For demonstration purposes I’ll enable all options.
In the Current Menu tab, you can change some defaults for the icons that you intend to add. The default values are fine, maybe except for Font Size. I set it to 1, to make it the same size as my menu text.
After saving the settings, you have to refresh the page to load all icon libraries.
When you expand the card for each menu item, you will see the option to select an icon. Click on Select.
On the left you have the menu with the active libraries, as well as the option of using an image or an SVG icon.
Let’s select an icon from the Font Awesome library.
I’ll do the same for a few more menu items, including sub-menu links.
Don’t forget to click on Save Menu.
You can see the menu icons on the front-end of the website. Depending on your theme, these icons may show up even in the mobile menus.
Even though this plugin should work with a lot of classic WordPress themes, you might have some issues with popular font libraries.
For example the Font Awesome library is used by many themes and plugins. In this case, depending on your unique setup, there could be some compatibility issues.
I like this plugin because it’s quick and easy to use. But if you have a commercial website where performance is very important, then you might want to invest into a more performant solution.