Do you want to add image icons to your WordPress navigation menu? This can help with the design and style of your menus for your users to understand them better. In this video, we will show you how to add image icons with your WordPress navigation menus.

The code we use for the second method can be found here:

For the first method, we will be showing you we will be using the plugin “Menu Image” found here:

With the plugin installed and activated, you can go under Appearance, Menus and edit or create a menu for your site. Under each menu item, you will now have the option to set a menu image and an image on hover. You also have the option to decide where the image appears and the size of the image.

The second option will be manually adding the CSS to add the images to your menu icons.

Start by using the screen options in your menu editor to display the CSS Classes. In the CSS Classes, you will want to add unique identifiers to each of your menu items for the code to choose from. With that set up with your images, you would add the CSS code from our article and change the name to the menu icon you want it to be.

Text version of this tutorial

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.

Check us out on Facebook

Follow us on Twitter

Check out our website for more WordPress Tutorials