How one can Add Picture Icons With Navigation Menus in WordPress

Do you wish to add picture icons to your WordPress navigation menus?

Photos may also help guests perceive your web site’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 how one can 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 web site.

In case your menu has numerous 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 solution to enhance pageviews and cut back bounce charge in WordPress. 

You may even use a picture icon to spotlight crucial 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 typically get extra signups, gross sales, members, and different conversions.

With that being stated, let’s see how one can add picture icons to your WordPress navigation menu. Merely use the short 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 simplest approach so as to add picture icons to your WordPress menus is by utilizing the Menu Picture plugin. This plugin comes with dashicon icons that you could add with just some clicks.

When you’ve got added Font Superior icons to your web site, then you need to use them with this free plugin. For extra data on how one can arrange Font Superior, see our information on how one can simply add icon fonts to your WordPress theme.

If you wish to use your individual icon information, then Menu Picture additionally lets you choose a picture or icon from the WordPress media library.

The very first thing it’s good to do is to put in and activate the Menu Picture plugin. For extra particulars, see our step-by-step information on how one can 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 begin, 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 mechanically. Nonetheless, should you use photographs from the media library, then you definitely’ll want to pick out the scale manually.

The plugin helps the default WordPress picture sizes, reminiscent of 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 properly for many web sites, however you can also make the icons greater or smaller by typing in several numbers for 1st, 2nd, or third Menu Picture measurement.

While you’re including icons to your menu, you’ll see an ‘picture on hover’ discipline by default. This lets you present a special icon when the customer hovers over that menu merchandise.

Simply bear in mind this setting is simply obtainable once you’re utilizing your individual photographs. You don’t want to fret in regards to the ‘picture on hover’ function should you plan to make use of dashicons or Font Superior icons.

Exhibiting a special icon may also help guests see the place they’re within the navigation menu. That is significantly helpful if a menu has numerous totally different objects. For instance, you may 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 discipline.’

With that executed, click on on ‘Save Modifications’ to retailer your settings.

So as to add icons to the navigation menu, head over to Look » Menus. By default, WordPress will present your web site’s major menu.

If you wish to edit a special 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 determine whether or not to make use of your individual 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 out any dashicon or Font Superior icon.

Do you wish to use your individual photographs 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 pc.

For those who checked ‘Allow the picture on hover discipline’ within the plugin’s settings, then you definitely’ll additionally must click on on ‘Set picture on hover.’

Now, select a picture to point out when the person hovers over this menu merchandise.

Typically, it’s possible 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 Measurement dropdown and select a measurement from the listing. Utilizing the identical measurement for all icons tends to make the menu look extra organized.

Nonetheless, you may make the menu’s most vital icon greater. For instance, should you’ve created an internet retailer utilizing a plugin like WooCommerce, then you definitely may use a much bigger icon for ‘Checkout’ so it stands out.

While you’re pleased with the icon, it’s time to take a look at the menu merchandise’s label.

By default, the plugin reveals the title label after the icon.

To vary this, choose any of the radio buttons within the ‘Title place’ part.

An alternative choice is to take away the navigation label utterly, creating an icon-only menu. This will stop a menu with a variety of objects from wanting cluttered.

Nonetheless, you need to solely cover the labels if it’s apparent what every icon means. If it’s unclear, then guests will battle to navigate your WordPress weblog or web site.

To go forward and conceal the label, choose the radio button subsequent to ‘None.’

While you’re pleased with how the menu merchandise is about up, click on on ‘Save Modifications.’

So as to add an icon to different menu objects, merely observe the identical course of described above.

While you’ve completed, don’t neglect to click on on the ‘Save Menu’ button. Now, should 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)

It’s also possible to add picture icons to your navigation menus utilizing customized CSS. This offers you extra flexibility to regulate precisely the place the icons seem in your menus.

Nonetheless, it does require you so as to add customized code in WordPress, so it’s beneficial for extra intermediate or superior WordPress customers.

Earlier than you begin, go forward and add all of your picture information 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 may prevent a variety of time.

To seek out a picture’s URL, merely choose it within the WordPress media library after which take a look at the ‘File URL’ discipline.

For extra detailed directions, please see our information on how one can get the URL of photographs 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, it’s good to allow customized CSS lessons by clicking on ‘Display Choices.’

Within the panel that seems, verify the field subsequent to ‘CSS Lessons.’

With that executed, you possibly can add customized CSS lessons 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 lessons something you need, nevertheless it’s a good suggestion to make use of one thing that helps you determine 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 (non-compulsory)’ discipline, kind within the class identify you wish to use.

You’ll use these customized CSS lessons within the subsequent step, so make a remark 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 might be tied to its personal CSS class, so make sure 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.

Typically, WordPress tutorials will let you know so as to add code snippets to your WordPress theme information. Nonetheless, 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 means that you can add customized code with out modifying your theme’s features.php file.

The very first thing it’s good to do is set up and activate the free WPCode plugin. For extra particulars, see our step-by-step information on how one can 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 begin, kind in a title for the customized code snippet. This may be something that helps you determine the snippet within the WordPress dashboard.

With that executed, 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:

Notice: You have to 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 have to 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’ discipline.

While you’re glad along with your code, scroll to the ‘Insertion’ part. WPCode can add code to totally different areas, reminiscent of after each put up, frontend solely, or admin solely.

You wish to use the customized CSS code throughout our whole WordPress web site, so click on on ‘Auto Insert’ if it isn’t already chosen.

Then, open the ‘Location’ dropdown menu and select ‘Website Huge Header.’

After that, you’re able to scroll to the highest of the display screen and click on on the ‘Inactive’ toggle, so it modifications to ‘Energetic.’

Lastly, click on on ‘Save Snippet’ to make the customized CSS dwell.

Now, should you go to your web site you’ll see all of the picture icons in your navigation menu.

Relying in your theme, it’s possible you’ll must tweak the CSS so it reveals the picture icons in precisely the suitable spot. If 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 modifications.

We hope this text helped you discover ways to add picture icons to your WordPress navigation menu. It’s also possible to undergo our information on the very best drag-and-drop WordPress web page builders and how one can generate profits on-line running a blog with WordPress.

For those who preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.

The put up How one can Add Picture Icons With Navigation Menus in WordPress first appeared on WPBeginner.

Supply hyperlink