WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» WordPress Plugins» How to Add Image Icons With Navigation Menus in WordPress

How to Add Image Icons With Navigation Menus in WordPress

Last updated on December 10th, 2018 by Editorial Staff
433 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Add Image Icons With Navigation Menus in WordPress

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

Adding navigation menu icons in WordPress

Why You Should Add Image Icons with Navigation Menus?

Usually, WordPress navigation menus are plain text links. These links work for most websites, however, you can make your navigation menu look more interactive by adding image icons.

Image icons can also be used to make your menu more noticeable. For example, a beautiful image icon next to your contact page can make it standout among other links in your menu.

With that said, let’s take a look at how to easily add image icons with navigation menus in WordPress.

Video Tutorial

Subscribe to WPBeginner

If you don’t want to watch the video tutorial, then you can continue reading the text version below:

Method 1: Adding Menu Icons Using a Plugin

This method is easier and it’s recommended for beginner users because it doesn’t involve code.

The first thing you need to do is to install and activate the Menu Image plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Menus page.

From here, you can click on any menu item in the in the right column to expand it. You’ll see the ‘Menu image’ and ‘Image on hover’ buttons in settings for each item.

Menu image buttons

Using these buttons, you can select or upload the menu image icon you want to use. If you want, then you can just upload a menu image and ignore the hover image.

In the ‘Image size’ dropdown, you can select a size for the image icon. This size will apply to both the menu icon image and image on hover.

The plugin comes with multiple options to choose from. However we recommend to keep menu icons small by using 24×24 or 36×36 sizes.

Menus icon size

If you want to add your own custom size for the menu images, 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;
 
});

You can also set the title position above, below, before, or after the image icon. It also allows you to hide the title and only display the image icon for each navigation menu.

Title position

Once you have configured the settings, simply add image icons to all your navigation menu items separately. Next, you need to click on the ‘Save Menu’ button to see menu icons in action.

Image icons in navigation menu

Method 2: Adding Menu Icons Using Code Snippet

This method is for more experienced users who know their way around CSS.

First, you need to visit Media » Add New to upload all your image icons in WordPress. Once uploaded, you need to copy their URLs and paste them in a text editor like Notepad.

Next, you need to go to Appearance » Menus and click on the ‘Screen Options‘ button at the top right corner of your screen. In the screen options, you need to check the ‘CSS Classes’ option.

Add CSS classes

After that, scroll down and click on any menu item to expand its settings. You’ll notice a ‘CSS Classes (Optional)’ field where you need to add a CSS class name for the menu item.

Add class name

Now you need to add this custom CSS to your theme.


.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

In this CSS snippet, .homeicon is the class name that you added in the CSS Classes field above.

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

That’s all. 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 Facebook.

433 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

30 Comments

Leave a Reply
  1. Jo Lee says:
    Feb 8, 2019 at 6:12 pm

    I have done all of the above and within the menu I can see the image that I have uploaded so looks like it’s all worked but when I go to the front page of the website the images are not showing, can’t understand why it’s not working

    Reply
    • WPBeginner Support says:
      Feb 11, 2019 at 2:38 pm

      If you’re using the plugin you may want to reach out to the plugin’s support otherwise, you would want to reach out to your theme’s support in case it is being overridden by your theme’s settings

      Reply
  2. Saviour Ukpong says:
    Oct 29, 2018 at 11:11 am

    Nice one, but how do we do it with font awesome??

    Reply
  3. Christina says:
    Jul 20, 2018 at 5:08 pm

    Love you guys!!!! You always have what I need. This is perfect!!!! Thank you!

    Reply
  4. zviryatko says:
    Jun 2, 2018 at 1:00 pm

    Hello, I’m author of Menu Image plugin, and first of all thanks for great article and video manual! May I use link for this tutorial in plugin official description?

    And feel free to contact me in case if it misses some useful features, I can add it in new releases.

    Btw, there is new version with new title positions: below and above the image.

    Reply
    • WPBeginner Support says:
      Jun 7, 2018 at 1:01 pm

      Hi zviryatko,

      Yes, please feel free to add the link and we appreciate it. However, we do not allow full copy of an article. Thank you for letting us know about the new version.

      Reply
    • Steph Reed says:
      Aug 8, 2018 at 10:21 pm

      Hey, I’ve been trying to get the newest version of this to work (totally breaks the menu for me, links included) and it looks like all support is dead air. @zviryatko do you intend on maintaining your plugin? I really like it when it works but I’m considering ditching it for a custom coded solution.

      Reply
      • zviryatko says:
        Jan 29, 2019 at 5:07 pm

        Hello Steph,
        I’m doing some small steps, usually helping people with some custom css to fix their theme. But still, have some plan for fixing supports of old themes and providing a version with better support per user.

        Reply
  5. Ivan says:
    Dec 18, 2017 at 8:59 am

    Thanks! :)

    Reply
  6. hamied hassan says:
    Jun 17, 2017 at 5:34 am

    i would like icon to other menu i can do it by this way

    Reply
  7. NenaRahin says:
    Jan 11, 2017 at 12:40 pm

    I can’t edit files . I want to add custom image sizes but when I try to save , it shows
    “Unable to save file: Permission denied ‘/var/www/html/wp-content/plugins/menu-image/menu-image.php’ ”

    The message also displays whenever I try to edit any files [by atom editor]. Can you please help. Thanks in advance

    Reply
  8. Jenna says:
    Dec 21, 2016 at 2:09 pm

    I was wondering if there was a way to have the image line up evenly with the title? That way the image doesn’t fall in the middle but aligns on the bottom.

    Reply
  9. David says:
    Dec 18, 2016 at 12:25 am

    I’m sure this is going to be helpful. Especially that font-awesome will always not have enough icons.

    Reply
  10. Catalin says:
    Nov 6, 2016 at 2:46 pm

    The plugin is not available. Please upload a new link, or change the plugin refeer.

    Reply
  11. CC says:
    Aug 12, 2016 at 1:49 pm

    Hi There! I’ve been using Menu-Icons but there is no way to place icon ABOVE the Menu Text with that plugin. Does the Menu Image plugin allow this option? If not, how would I tweek either plugin to make this work. PS: Not a developer so the simpler/more detailed the instructions the better! Thanks much!

    Reply
  12. YJ says:
    Jul 9, 2016 at 11:56 pm

    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?

    Reply
  13. Chris says:
    Jul 4, 2016 at 11:02 pm

    that worked really well, thanks! :)

    Reply
  14. Geoff Cox says:
    May 28, 2016 at 11:49 am

    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

    Reply
  15. Amanda says:
    Feb 18, 2016 at 1:02 pm

    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?

    Reply
  16. Sean Vandenberg says:
    Feb 8, 2016 at 3:54 am

    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!

    Reply
  17. Jay says:
    Jan 30, 2016 at 4:43 pm

    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.

    Reply
  18. Evik says:
    Jan 24, 2016 at 10:06 am

    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.

    Reply
  19. Madeline says:
    Nov 2, 2015 at 5:21 am

    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!

    Reply
    • Madeline says:
      Nov 16, 2015 at 9:08 am

      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,

      Reply
      • Madeline says:
        Nov 25, 2015 at 10:01 am

        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.

        Reply
  20. Kristine says:
    Aug 25, 2015 at 7:13 pm

    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.

    Reply
  21. Mahilet says:
    May 22, 2015 at 10:46 pm

    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

    Reply
  22. Tim Dehring says:
    Dec 10, 2014 at 7:06 am

    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.

    Reply
    • Mike Hale says:
      Dec 11, 2014 at 10:06 am

      Tim – I use Font Awesome 4 Menus https://wordpress.org/plugins/font-awesome-4-menus/ on a site, but I’ll have to check that one out. Thanks for the tip.

      Reply
      • Tim Dehring says:
        Dec 15, 2014 at 11:39 pm

        No problem, happy to share!

        Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.