How to Add Image Icons With Navigation Menus in WordPress

Like Tweet Pin it Share Share Email

Do you need to add picture icons in your WordPress navigation menus? Lately, one in every of our customers requested for a simple approach so as to add menu icons. On this article, we are going to present you add picture icons with navigation menus in WordPress.

Adding navigation menu icons in WordPress

Why You Ought to Add Picture Icons with Navigation Menus?

Often, WordPress navigation menus are plain textual content hyperlinks. These hyperlinks work for many web sites, nevertheless, you may make your navigation menu look extra interactive by including picture icons.

Picture icons may also be used to make your menu extra noticeable. For instance, a gorgeous picture icon subsequent to your contact web page could make it standout amongst different hyperlinks in your menu.

With that stated, let’s check out simply add picture icons with navigation menus in WordPress.

Video Tutorial

In case you don’t need to watch the video tutorial, then you possibly can proceed studying the textual content model beneath:

Technique 1: Including Menu Icons Utilizing a Plugin

This technique is simpler and it’s advisable for newbie customers as a result of it doesn’t contain code.

The very first thing you could do is to put in and activate the Menu Picture plugin. For extra particulars, see our step-by-step information on set up a WordPress plugin.

Upon activation, you could go to Look » Menus web page.

From right here, you possibly can click on on any menu merchandise within the in the correct column to broaden it. You’ll see the ‘Menu picture’ and ‘Picture on hover’ buttons in settings for every merchandise.

Menu image buttons

Utilizing these buttons, you possibly can choose or add the menu picture icon you need to use. In order for you, then you possibly can simply add a menu picture and ignore the hover picture.

Within the ‘Picture dimension’ dropdown, you possibly can choose a dimension for the picture icon. This dimension will apply to each the menu icon picture and picture on hover.

The plugin comes with a number of choices to select from. Nevertheless we advocate to maintain menu icons small through the use of 24×24 or 36×36 sizes.

Menus icon size

If you wish to add your personal customized dimension for the menu photographs, then you are able to do that by including this code in your theme’s capabilities.php file or site-specific plugin.

add_filter( 'menu_image_default_sizes', perform($sizes));

It’s also possible to set the title place above, beneath, earlier than, or after the picture icon. It additionally permits you to disguise the title and solely show the picture icon for every navigation menu.

Title position

After you have configured the settings, merely add picture icons to all of your navigation menu gadgets individually. Subsequent, you could click on on the ‘Save Menu’ button to see menu icons in motion.

Image icons in navigation menu

Technique 2: Including Menu Icons Utilizing Code Snippet

This technique is for extra skilled customers who know their approach round CSS.

First, you could go to Media » Add New to add all of your picture icons in WordPress. As soon as uploaded, you could copy their URLs and paste them in a textual content editor like Notepad.

Subsequent, you could go to Look » Menus and click on on the ‘Display Choices‘ button on the prime proper nook of your display. Within the display choices, you could test the ‘CSS Lessons’ choice.

Add CSS classes

After that, scroll down and click on on any menu merchandise to broaden its settings. You’ll discover a ‘CSS Lessons (Elective)’ area the place you could add a CSS class identify for the menu merchandise.

Add class name

Now you could add this customized CSS to your theme.

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


On this CSS snippet, .homeicon is the category identify that you just added within the CSS Lessons area above.

Relying in your theme, it’s possible you’ll have to tweak the CSS slightly bit to get the right placement for menu icons. As soon as you’re glad with the consequence, repeat the method for all menu gadgets.

That’s all. We hope this text helped you learn to add picture icons with navigation menus in WordPress. You might also need to try our information on type WordPress navigation menus.

In case you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.

Comments (0)

Leave a Reply

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