Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Image Icons With Navigation Menus in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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.

Menu Icons

Video Tutorial

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.

Uploading a menu image

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 36x36 size
  unset($sizes['menu-36x36']);

  // add a new size
  $sizes['menu-50x50'] = 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.

Display CSS classes in Menu Items

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.

Adding custom CSS classes to menus in WordPress

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+.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. YJ says:

    Hi, i added a shortcode in the description textbox there :[glt language=”English” Label=”English”],
    after using this plugin, this shortcode no function and display icon only on my page,anyone can help?

  2. Chris says:

    that worked really well, thanks! :)

  3. Geoff Cox says:

    Hello

    ‘have just tried the “Menu Image” plugin and have added the Facebook and the Youtube pics form my own Media Library.

    But !! I am using the Twenty Sixteen Theme which uses genericons for the social media menu and they are still there!

    I want to replace them with my own images. How do I remove the genericons?

    Cheers

    Geoff

  4. Amanda says:

    This plugin isn’t working. But I do have an option for icons … but I don’t have the Font Awesome Menu Icons installed … is it possible that maybe it’s built into the theme and it’ conflicting with this plugin?

  5. Sean Vandenberg says:

    Sheesh, thanks. This saved me lots of time I would have spent coding otherwise. Typically, I use ionicons or font awesome for menus – but the customer is always right! :)

    Again, super thanks!

  6. Jay says:

    I basically added this to the Menu label

    ………………………..

    It basically turns the text white and my background is white.

    A proper solution would be ideal.

  7. Evik says:

    Hi, this plugin would be perfect, if the hide of the original text would work. I prefer just having my image instead of the text and even if I set “hide”, the text is still showing, on the left of the image. Any ideas why?

    Thanks for help.

  8. Madeline says:

    This all works great, except that each image is stuck behind the text in the navigation bar instead of sitting to the side of it. I think the problem is that each section of the nav bar menu is the exact size of the text so it’s pushing the images inwards to fit into the space. I’ve tried various things with padding, image size etc but can’t get it to work. Thanks for any help with fixing this!

    • Madeline says:

      Hi guys, does anyone have any thoughts on this please? I’m really stuck and I feel like there should be a straightforward way of fixing it! Thanks,

      • Madeline says:

        I found a solution so am posting in case this is of use to others. I set a ‘min-width’ element for each item in the navigation menu, and reduced padding, margins and text-size to make sure there is enough room for all the items to fit on one line. It’s not a 100% ideal solution because it will look slightly different depending on screen size, but this is the best I could come up with.

  9. Kristine says:

    Thank you for this! I looked all over before I found this as the solution to my client’s problem. Love that I could replace ONE BUTTON instead of EVERYTHING.

  10. Mahilet says:

    if you have no Navigation Label. then it deletes your menu item. for example I have a youtube icon and i don’t want any text, just a link so i have to a ‘.’ inthere

  11. Tim Dehring says:

    One I use heavily and recommend is Menu Icons (https://wordpress.org/plugins/menu-icons/). Allows you to choose from Font Awesome, Genericons, and many other free icon fonts for menu icons.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.