How to Add Image Icons With Navigation Menus in WordPress

Do you want to add icons in your WordPress navigation menu? Recently, one of our users asked for an easy way to add images as icons in navigation menus. In this article, we will show you how to add image icons in your WordPress navigation menus without editing any code.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Menu Image plugin. Upon activation, go to Appearance » Menus. There you will see an option to add images with each item in your existing menu.

Next, upload the image you want to display next to the navigation menu by clicking on the ‘Set Image’ button.

The plugin automatically creates three new image sizes of 24 x 24, 36 x 36, and 48 x 48 pixels. You can choose them from image size drop down menu. You can also choose where you want menu title to appear. You can display it before or after the image. You can also hide the title and display only the image.

Adding Your Own Image Size

If you want to add your own custom image size for the images you upload to the menu, then you can do that by adding this code in your theme’s functions.php file or site-specific plugin.

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

add_filter(  menu_image_default_sizes , function($sizes){

// remove the default 36×36 size

unset($sizes[ menu-36×36 ]);

// add a new size

$sizes[ menu-50×50 ] = array(50,50);

// return $sizes (required)

return $sizes;

});

Adding Images To Navigation Menus Manually with CSS

This method is for more experienced users who know their way around CSS. First you need to upload your images to WordPress by visiting Media » Add New. After uploading each image, copy their URLs and paste them in a text editor like Notepad.

Now head over to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. On the screen options menu, check the box next to CSS classes.

Next scrolldown to click on any item in your current menu, and you will notice a CSS class field. All you need to do is add a CSS class to your menu item.

After that you need to add this CSS in your theme or child theme’s stylesheet.

۱

۲

۳

۴

۵

۶

.homepage {

background-image: url( http://www.example.com/wp-content/uploads/2014/12/home.png );

background-repeat: no-repeat;

background-position: left;

padding-left: 5px;

}

Don’t forget to change .homepage to whatever CSS class you entered, and change the URL of the background image from the one you saved earlier in a text file.

Depending on your theme, you may need to tweak the CSS a little bit. Once you are satisfied with the result, repeat the process for all menu items.

That’s all for now. We hope this article helped you learn how to add image icons with navigation menus in WordPress. You may also want to check out our guide on how to style WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *