Search

How to Add Images or Icons to Menu Items in WordPress

Listen to this article
Image in WordPress Nav Menu
Add an Image in Navigation Menu

Adding images can bring clear focus on items, and can make them attractive. I’ve always liked seeing images on navigation menu items, they add more appeal. Images can be used instead of menu text, like a house image for ‘Home’, or a mail for ‘Contact Us’. You can also use images besides text too, which is preferred incase images don’t load. (But these images, are generally small in size so I don’t think that loading would be a problem).

I’ll tell you two simple ways to add images to your navigation menu items. One is using actual images, and the other is using font awesome icons. Both these methods basically use CSS to display a graphic next to your menu name text.

[space]

Add Custom CSS to Menu Item

If we are going to use custom CSS to display a graphic with the menu item, there should be a way to specify this. WordPress provides us with an option to add custom css classes to menu items. This makes our job fairly simple. But by default, this option is not visible. To display this option, go to Appearance-> Menus in your dashboard. Find the ‘Screen Options’ tab and enable ‘CSS Classes’ in ‘Show advanced menu properties’.

Menus CSS Settings WordPress
Add Custom CSS to Menu Item

[space]

Adding Images to Your Menu Item

The images that you want to display for your menus items, should be added in ‘images’ folder of your theme. Then, you can go to your theme stylesheet, and add the following classes.

/*
Custom Menu Images
---------------------------------------------------------------------------- */

.home-menu-image a{

padding-left: 30px !important;
background-image: url(images/Home.png);
background-position: left;
background-repeat: no-repeat;

}

.sample-menu-image a{

padding-left: 30px !important;
background-image: url(images/leaf.png);
background-position: left;
background-repeat: no-repeat;

}

This basically sets a background image for your menu item. The background image position is specified as ‘left’, to indicate that the image will appear before the menu item. If you specify ‘center’, the image will be placed at the center of your menu. As an example, I have specified menu images for ‘Home’ and a ‘Sample’ menu page. You can use this idea for all menu items.

Now, specify the corresponding classes, for your menu items.

Custom CSS Menu WordPress
Set a CSS Class

 

Your menu should look something like this.

Nav-Menu-with-Images
WordPress Navigation Menu with Images

[space]

Use Font Awesome Icons for your Menus

 

Font Awesome is a font originally created for Twitter Bootstrap, but can now be used in WordPress, with the use of a plugin, Font Awesome 4 Menus. Although the name of the plugin says Font Awesome for Menus, icons can be added to any WordPress post or page, apart from just menu items. The plugin loads it’s own stylesheet, to load the fonts.

Install the plugin, and start using the CSS classes. You can find a list of CSS classes for your desired icons from the Font Awesome Cheatsheet.

Font Awesome CSS Menu
Set Font Awesome Class

For menu items, specify the classes in the CSS Classes field.

Font Awesome Icons Navigation Menu WordPress
WordPress Navigation Menu with Icons

My go to option is adding Font Awesome Icons to the menu. There are numerous icons available, and they are made up of vectors and thus are responsive. What option would you prefer? Let me know your thoughts in the comment section below.

 

Praveen Chauhan

Praveen Chauhan

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

How to Make Responsive Tables using CSS without Tag
Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads