Add Image Icons With Navigation Menus in WordPress
Quick Summary
- The free Menu Icons by Themeisle plugin adds an image or icon to WordPress navigation menu items without any custom code.
- After activating it, turn on the Image icon type in the Menu Icons Settings box on the Appearance Menus screen, then select an image for each menu item.
- Use small, optimized images so the menu loads quickly, and adjust icon size or spacing with a bit of CSS.
You don’t need custom code to show an image or icon next to the items in a WordPress navigation menu. The free Menu Icons by Themeisle plugin from the WordPress.org plugin directory handles it from the menu screen you already use.
How to set it up
- In the WordPress admin, go to Plugins > Add Plugin, search for Menu Icons, then install and activate Menu Icons by Themeisle.
- Open Appearance > Menus. In the Menu Icons Settings box, tick Image under Icon Types (only Dashicons is on by default) and click Save Settings. If you don’t see the box, enable it under Screen Options at the top of the page.
- Expand the menu item you want to change and click Select next to Icon to choose the image to show with that link.
- Save the menu and check the result on the front end of your site.
Use small, optimized images so the menu loads quickly and the icons line up with the text. If an icon looks out of place next to the label, adjust its size or spacing with a bit of CSS in your theme.
Related articles
- a login/logout menu item: another menu feature from a free plugin
- highlighting the current page in a menu: styling menu items with a little CSS
- dropdown arrows for parent menu items: a code-based menu tweak
