Do you wish to add picture icons to your WordPress navigation menus?
Pictures will help guests perceive your website’s navigation at a look. You’ll be able to even use icons to spotlight the menu’s most vital content material or name to motion.
On this article, we are going to present you easy methods to add picture icons to navigation menus in WordPress.
Why Add Picture Icons With Navigation Menus in WordPress?
Normally, WordPress navigation menus are plain textual content hyperlinks. These hyperlinks work for many web sites, however they don’t all the time look fascinating or participating.
By including picture icons to the navigation menu, you possibly can encourage guests to concentrate to the menu and discover extra of your website.
In case your menu has a lot of totally different choices, then picture icons could make it simpler for guests to scan the content material and discover what they’re on the lookout for. This may be a straightforward approach to improve pageviews and cut back bounce price in WordPress.
You would possibly even use a picture icon to spotlight an important menu merchandise, such because the Checkout hyperlink in your on-line market.
By highlighting a name to motion within the menu bar, you possibly can usually get extra signups, gross sales, members, and different conversions.
With that being mentioned, let’s see how one can add picture icons to your WordPress navigation menu. Merely use the fast hyperlinks beneath to leap straight to the tactic you wish to use.
Methodology 1: Add Picture Icons to Navigation Menus Utilizing a Plugin (Fast and Straightforward)
The best method so as to add picture icons to your WordPress menus is through the use of the Menu Picture plugin. This plugin comes with dashicon icons that you could add with only a few clicks.
You probably have added Font Superior icons to your web site, then you need to use them with this free plugin. For extra data on easy methods to arrange Font Superior, see our information on easy methods to simply add icon fonts to your WordPress theme.
If you wish to use your personal icon recordsdata, then Menu Picture additionally lets you choose a picture or icon from the WordPress media library.
The very first thing that you must do is to put in and activate the Menu Picture plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.
Upon activation, click on on Menu Picture within the WordPress dashboard. On this display screen, you possibly can select whether or not to get safety and have notifications or click on on the ‘Skip’ button.
It will take you to a display screen the place you possibly can configure the plugin’s settings. To start out, you’ll see all of the totally different sizes you need to use for the picture icons.
For those who plan to make use of icons from Font Superior or dashicons, then Menu Picture will resize them robotically. Nevertheless, when you use photos from the media library, then you definately’ll want to pick the dimensions manually.
The plugin helps the default WordPress picture sizes, corresponding to thumbnail, picture, and enormous. It additionally provides three distinctive sizes which can be set to 24×24, 36×36, and 48×48 pixels by default.
These settings ought to work nicely for many web sites, however you may make the icons larger or smaller by typing in several numbers for 1st, 2nd, or third Menu Picture dimension.
Once you’re including icons to your menu, you’ll see an ‘picture on hover’ area by default. This lets you present a unique icon when the customer hovers over that menu merchandise.
Simply bear in mind this setting is just out there whenever you’re utilizing your personal photos. You don’t want to fret concerning the ‘picture on hover’ characteristic when you plan to make use of dashicons or Font Superior icons.
Displaying a unique icon will help guests see the place they’re within the navigation menu. That is significantly helpful if a menu has a lot of totally different objects. For instance, you would possibly use totally different colours or icon sizes to spotlight the currently-selected menu merchandise.
If you wish to attempt totally different hover results, then be sure you verify ‘Allow the picture on hover area.’
With that accomplished, click on on ‘Save Adjustments’ to retailer your settings.
So as to add icons to the navigation menu, head over to Look » Menus. By default, WordPress will present your website’s main menu.
If you wish to edit a unique menu, then merely open the ‘Choose a menu to edit’ dropdown and select a menu from the listing. After that, click on on ‘Choose.’
Now, discover the primary menu merchandise the place you wish to add an icon and provides it a click on. Then, merely choose the brand new ‘Add Picture / Icon’ button.
Now you can resolve whether or not to make use of your personal picture or select an icon.
To make use of a ready-made icon, click on on the radio button subsequent to ‘Icons.’ You’ll be able to then click on to pick any dashicon or Font Superior icon.
Do you wish to use your personal photos as an alternative?
Then choose the radio button subsequent to ‘Picture’ and click on the ‘Set Picture’ hyperlink.
Now you can both select a picture from the WordPress media library or add a brand new file out of your laptop.
For those who checked ‘Allow the picture on hover area’ within the plugin’s settings, then you definately’ll additionally must click on on ‘Set picture on hover.’
Now, select a picture to indicate when the person hovers over this menu merchandise.
Generally, chances are you’ll wish to ignore this setting and present the identical icon it doesn’t matter what. To do that, click on on ‘Set picture on hover’ after which select the very same picture.
For those who don’t do that, then the icon will disappear when the customer hovers over it.
After that, open the Picture Dimension dropdown and select a dimension from the listing. Utilizing the identical dimension for all icons tends to make the menu look extra organized.
Nevertheless, you would possibly make the menu’s most vital icon larger. For instance, when you’ve created an on-line retailer utilizing a plugin like WooCommerce, then you definately would possibly use an even bigger icon for ‘Checkout’ so it stands out.
Once you’re proud of the icon, it’s time to have a look at the menu merchandise’s label.
By default, the plugin exhibits the title label after the icon.
To alter this, choose any of the radio buttons within the ‘Title place’ part.
An alternative choice is to take away the navigation label fully, creating an icon-only menu. This may stop a menu with a whole lot of objects from trying cluttered.
Nevertheless, you need to solely disguise the labels if it’s apparent what every icon means. If it’s unclear, then guests will wrestle to navigate your WordPress weblog or web site.
To go forward and conceal the label, choose the radio button subsequent to ‘None.’
Once you’re proud of how the menu merchandise is ready up, click on on ‘Save Adjustments.’
So as to add an icon to different menu objects, merely observe the identical course of described above.
Once you’ve completed, don’t overlook to click on on the ‘Save Menu’ button. Now, when you go to your web site you’ll see the up to date navigation menu dwell.
Methodology 2: Add Icons to WordPress Menus Utilizing Code (Extra Customizable)
You may as well add picture icons to your navigation menus utilizing customized CSS. This provides you extra flexibility to manage precisely the place the icons seem in your menus.
Nevertheless, it does require you to add customized code in WordPress, so it’s really helpful for extra intermediate or superior WordPress customers.
Earlier than you begin, go forward and add all of your picture recordsdata to the WordPress media library. For every picture, be sure you copy its URL and paste it right into a textual content editor like Notepad. You’ll want to make use of the hyperlinks in your code, so this will prevent a whole lot of time.
To search out a picture’s URL, merely choose it within the WordPress media library after which take a look at the ‘File URL’ area.
For extra detailed directions, please see our information on easy methods to get the URL of photos you add in WordPress.
After that, go to Look » Menus.
Subsequent, open the ‘Choose a menu to edit’ dropdown and select the menu the place you wish to add the picture icons.
After that, go forward and click on on ‘Choose.’
Subsequent, that you must allow customized CSS courses by clicking on ‘Display Choices.’
Within the panel that seems, verify the field subsequent to ‘CSS Lessons.’
With that accomplished, you possibly can add customized CSS courses to any merchandise within the navigation menu. That is how you’ll hyperlink every menu merchandise to a picture within the WordPress media library.
You’ll be able to name these courses something you need, nevertheless it’s a good suggestion to make use of one thing that helps you establish the menu merchandise.
To get began, merely click on on the primary merchandise you wish to add a picture icon to. Within the ‘CSS Lessons (elective)’ area, sort within the class identify you wish to use.
You’ll use these customized CSS courses within the subsequent step, so make an observation of them in your Notepad or comparable app.
Merely observe the identical course of so as to add a separate class to all of your menu objects. After that, click on on ‘Save Menu’ to retailer your settings.
Notice: Every icon can be tied to its personal CSS class, so remember to label the menu objects otherwise if you wish to use separate icons.
Now you’re prepared so as to add picture icons to your WordPress navigation menus utilizing CSS.
Usually, WordPress tutorials will let you know so as to add code snippets to your WordPress theme recordsdata. Nevertheless, doing so could trigger frequent WordPress errors and isn’t very beginner-friendly.
That’s why we advocate WPCode.
WPCode is the most well-liked code snippets plugin utilized by over 1 million WordPress web sites. It lets you add customized code with out enhancing your theme’s capabilities.php file.
The very first thing that you must do is set up and activate the free WPCode plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.
Upon activation, head over to Code Snippets » Add Snippet.
Right here, merely hover your mouse over ‘Add Your Customized Code.’
When it seems, click on on ‘Use snippet.’
To start out, sort in a title for the customized code snippet. This may be something that helps you establish the snippet within the WordPress dashboard.
With that accomplished, open the ‘Code Sort’ dropdown and choose ‘CSS Snippet.’
Within the code editor, you’ll want so as to add some code for each icon you wish to present.
That will help you out, we’ve created a pattern snippet beneath. You’ll be able to go forward and alter ‘.carticon’ to the customized CSS class you created within the earlier step. You’ll additionally want to switch the URL with a hyperlink to the picture in your WordPress media library:
background-image: url(‘http://localhost:10013/wp-content/my-media/cartcheckout.png’);
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
Notice: You will have to maintain the dot ‘.’ in entrance of the CSS class within the code snippet. That’s what tells WordPress that it’s a category and never one other type of CSS selector.
You will have to regulate the snippet above for every particular person menu merchandise you created above. You’ll be able to merely paste all of them into the ‘Code Preview’ area.
Once you’re glad together with your code, scroll to the ‘Insertion’ part. WPCode can add code to totally different places, corresponding to after each put up, frontend solely, or admin solely.
You wish to use the customized CSS code throughout our complete WordPress web site, so click on on ‘Auto Insert’ if it isn’t already chosen.
Then, open the ‘Location’ dropdown menu and select ‘Web site Broad Header.’
After that, you’re able to scroll to the highest of the display screen and click on on the ‘Inactive’ toggle, so it adjustments to ‘Lively.’
Lastly, click on on ‘Save Snippet’ to make the customized CSS dwell.
Now, when you go to your web site you’ll see all of the picture icons in your navigation menu.
Relying in your theme, chances are you’ll must tweak the CSS so it exhibits the picture icons in precisely the proper spot. If that is so, then head to Code Snippets » Code Snippets within the WordPress dashboard.
Then, merely hover over the snippet and click on on the ‘Edit’ hyperlink when it seems.
This opens the code editor, prepared so that you can make some adjustments.
We hope this text helped you learn to add picture icons to your WordPress navigation menu. You may as well undergo our information on the finest drag-and-drop WordPress web page builders and easy methods to earn money on-line running a blog with WordPress.
For those who appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Fb.
The put up The best way to Add Picture Icons With Navigation Menus in WordPress first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!