How to replace text links of navigation menu with icons

Navigate to wp-dashboard > Appearance > Menus. If you have not created any menus, the theme locations will be empty (note, the Mobile Plugin navigation is not relevant for this tutorial).


Create “Top Nav” menu and then by selecting posts/pages and categories create your Navigation menu. Create a custom link to your “home” page. Drag and drop the menu link to sort the order of the menu.

After saving the menu you will find the page like this:


And in the frontend you’ll get this


Now to add a home icon instead of text, just write the following code in your style.css

#menu-main-menu {background:#0b2300;}
#menu-main-menu li {margin:0; padding:0;}
#menu-main-menu li a{padding:0 10px; color:#fff;}
#menu-main-menu li a:hover{background:#000; color:#fff;}
#menu-item-14 a{text-indent:-9999px; background:#000 url(images/home-button.png) center center no-repeat !important; width:30px;}
#menu-item-14 a:hover{text-indent:-9999px; background:#000 url(images/home-button-hover.png) center center no-repeat !important; width:30px;}

where #menu-item-14 is the id of the menu item, where I have to insert the Home icon.

And you’re all done !!

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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