Do you need so as to add picture icons to your WordPress navigation menus? Just lately, one in every of our customers requested for a very simple method so as to add menu icons. On this article, we will be able to display you upload picture icons with navigation menus in WordPress.
Why You Will have to Upload Symbol Icons with Navigation Menus?
Typically, WordPress navigation menus are simple textual content hyperlinks. Those hyperlinks paintings for many web sites, on the other hand, you’ll make your navigation menu glance extra interactive by way of including picture icons.
Symbol icons may also be used to make your menu extra noticeable. For instance, an exquisite picture icon subsequent on your contact page could make it standout amongst different hyperlinks to your menu.
With that stated, let’s check out simply upload picture icons with navigation menus in WordPress.
Means 1: Including Menu Icons The usage of a Plugin
This system is more uncomplicated and it’s beneficial for amateur customers as it doesn’t contain code.
The very first thing you wish to have to do is to put in and turn on the Menu Image plugin. For extra main points, see our step-by-step information on how to install a WordPress plugin.
Upon activation, you wish to have to talk over with Look » Menus web page.
From right here, you’ll click on on any menu merchandise within the in the best column to make bigger it. You’ll see the ‘Menu picture’ and ‘Symbol on hover’ buttons in settings for every merchandise.
The usage of those buttons, you’ll choose or add the menu picture icon you need to make use of. If you need, then you’ll simply add a menu picture and forget about the hover picture.
Within the ‘Symbol measurement’ dropdown, you’ll choose a measurement for the picture icon. This measurement will practice to each the menu icon picture and picture on hover.
The plugin comes with more than one choices to make a choice from. Then again we propose to stay menu icons small by way of the usage of 24×24 or 36×36 sizes.
If you wish to upload your personal customized measurement for the menu pictures, then you’ll do this by way of including this code to your theme’s functions.php file or site-specific plugin.
add_filter( 'menu_image_default_sizes', serve as($sizes){
// take away the default 36x36 measurement
unset($sizes['menu-36x36']);
// upload a brand new measurement
$sizes['menu-50x50'] = array(50,50);
// go back $sizes (required)
go back $sizes;
});
You’ll be able to additionally set the name role above, under, prior to, or after the picture icon. It additionally lets you cover the name and handiest show the picture icon for every navigation menu.
After getting configured the settings, merely upload picture icons to all of your navigation menu pieces one after the other. Subsequent, you wish to have to click on at the ‘Save Menu’ button to peer menu icons in motion.
Means 2: Including Menu Icons The usage of Code Snippet
This system is for extra skilled customers who know their method round CSS.
First, you wish to have to talk over with Media » Upload New to add all of your picture icons in WordPress. As soon as uploaded, you wish to have to replicate their URLs and paste them in a textual content editor like Notepad.
Subsequent, you wish to have to visit Look » Menus and click on at the ‘Screen Options‘ button on the most sensible proper nook of your display screen. Within the display screen choices, you wish to have to test the ‘CSS Categories’ choice.
After that, scroll down and click on on any menu merchandise to make bigger its settings. You’ll understand a ‘CSS Categories (Non-compulsory)’ box the place you wish to have so as to add a CSS elegance identify for the menu merchandise.
Now you wish to have so as to add this custom CSS on your theme.
.homeicon {
background-image: url('http://www.instance.com/wp-content/uploads/2018/09/house.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 Categories box above.
Relying in your theme, chances are you’ll wish to tweak the CSS just a little bit to get the very best placement for menu icons. As soon as you’re glad with the end result, repeat the method for all menu pieces.
That’s all. We are hoping this text helped you discover ways to upload picture icons with navigation menus in WordPress. You might also need to take a look at our information on how to style WordPress navigation menus.
When you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be able to additionally in finding us on Twitter and Facebook.
The submit How to Add Image Icons With Navigation Menus in WordPress seemed first on WPBeginner.
WordPress Maintenance