How to Add Image Icons With Navigation Menus in WordPress

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:
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/

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

Menu Image, Icons made easy

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
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Check us out on Facebook
https://www.facebook.com/wpbeginner

Follow us on Twitter

Check out our website for more WordPress Tutorials
http://www.wpbeginner.com

Author: Garry

Ak-Startup was founded with the simple aim to assist entrepreneurs who lack experience in areas essential to the business.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.