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.
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.
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.
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.
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.
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.
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.
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.
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.
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.