fbpx

How to Add Image Icons With Navigation Menus in WordPress

How to Add Image Icons With Navigation Menus in WordPress

Are you looking to enhance your WordPress navigation menus with image icons?

Including image icons can aid visitors in comprehending your site’s navigation more quickly. Additionally, you may utilize icons to draw attention to important menu items or encourage action.

This tutorial will guide you through the process of adding image icons to your WordPress navigation menus.

How to Add Image Icons With Navigation Menus in WordPress
How to Add Image Icons With Navigation Menus in WordPress

Importance of Including Image Icons in Navigation Menus in WordPress

Typically, WordPress navigation menus consist of plain text links, which can be sufficient for most websites. However, this type of menu may not be visually appealing or engaging enough for some users.

One way to enhance the appearance and functionality of your menu is by incorporating image icons. Adding image icons to your menu can capture the attention of visitors and encourage them to explore more of your website. It can also make it easier for them to navigate through different options, especially if there are multiple categories.

By utilizing image icons strategically, you can even emphasize the most important menu items, such as the Checkout link on your online marketplace. Highlighting a call to action in this way can increase the likelihood of conversions, whether it be signups, sales, or memberships.

If you’re interested in adding image icons to your WordPress navigation menu, there are various methods you can use. Simply refer to the step by step guide below to learn how to implement this feature.

Method 1: Add Icons to WordPress Menus Using Code

To customize your navigation menus in WordPress by adding image icons, you can use custom CSS. This approach offers more control over where the icons appear in your menus, but it requires some knowledge of WordPress and coding, making it best suited for intermediate or advanced users.

Before you start, upload all the image files you want to use to the WordPress media library and copy their URLs to a text editor like Notepad for easy reference in the code.

To add image icons to your WordPress navigation menu using CSS, go to Appearance » Menus and choose the menu where you want to add the icons. Click on ‘Select’ and then ‘Screen Options’ to enable custom CSS classes.

This allows you to link each menu item to an image in the WordPress media library by creating custom CSS classes for each item. You can use any name for these classes, but it’s recommended to choose a name that identifies the menu item.

To add a custom CSS class, select the menu item you want to modify, type in the name of the class in the ‘CSS Classes (optional)’ field, and repeat this process for all the other menu items.

Remember to label each menu item differently if you want to use separate icons. Once you’ve added all the classes, click ‘Save Menu’ to save your settings.

To add the CSS code, we recommend using the WPCode plugin, which allows you to add custom code without editing your theme’s functions.php file, minimizing the risk of causing common WordPress errors. Install and activate the WPCode plugin and go to Code Snippets » Add Snippet.

Type in a title for your custom code snippet, select ‘CSS Snippet’ from the ‘Code Type’ dropdown, and add the code for each icon you want to display in the code editor.

Here’s a sample code snippet to help you get started:

.carticon {
  background-image: url('URL OF THE IMAGE FILE');
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 20px;
}

Replace ‘.carticon’ with the custom CSS class you created earlier and replace the URL with the link to the image in your WordPress media library. Adjust the snippet for each menu item and paste them all into the ‘Code Preview’ field.

In the ‘Insertion’ section, select ‘Auto Insert’ and choose ‘Site Wide Header’ from the ‘Location’ dropdown menu to apply the custom CSS code across your entire WordPress website.

Finally, toggle the ‘Inactive’ button to ‘Active’ and click ‘Save Snippet’ to make the custom CSS live. Depending on your theme, you may need to adjust the CSS to position the image icons correctly. To do this, go to Code Snippets » Code Snippets in the WordPress dashboard and edit the code as needed.

Method 2: Add Image Icons to Navigation Menus Using a Plugin

Adding image icons to your WordPress menus can be easily accomplished using the Menu Image plugin. The plugin comes with dashicon icons that can be added to your menu with just a few clicks. In case you have added Font Awesome icons to your website, this free plugin also supports them.

If you want to use your own icon files, the Menu Image plugin allows you to select an image or icon from the WordPress media library. To start using the plugin, you need to install and activate it.

After activating the plugin, click on Menu Image in the WordPress dashboard. On this screen, you can choose whether to receive security and feature notifications or skip it.

This will take you to a screen where you can configure the plugin’s settings, where you’ll see all the different sizes you can use for the image icons.

Menu Image will resize icons from Font Awesome or dashicons automatically. However, if you use images from the media library, then you’ll need to select the size manually. The plugin supports default WordPress image sizes, such as thumbnail, image, and large, and also adds three unique sizes that are set to 24×24, 36×36, and 48×48 pixels by default.

When adding icons to your menu, you’ll see an ‘image on hover’ field by default. This field allows you to show a different icon when the visitor hovers over that menu item. This feature is only available when using your own images, not dashicons or Font Awesome icons.

To enable the image on hover field, check ‘Enable the image on hover field’ and click on ‘Save Changes’.

To add icons to the navigation menu, go to Appearance » Menus. WordPress will show your site’s primary menu by default. To edit a different menu, simply open the ‘Select a menu to edit’ dropdown and choose a menu from the list, then click on ‘Select’.

Now, find the menu item where you want to add an icon, and select the new ‘Add Image / Icon’ button. You can use a ready-made icon by clicking on the radio button next to ‘Icons’, or select your own image by clicking the ‘Set Image’ link after selecting the radio button next to ‘Image’.

If you enabled the image on hover field, select ‘Set image on hover’ and choose an image to show when the user hovers over the menu item. If you want to show the same icon regardless of whether the visitor hovers over it or not, choose the exact same image.

Choose an image size from the Image Size dropdown, and then adjust the label position as desired.

You can choose to display the title label after the icon or remove it completely, creating an icon-only menu. However, only hide the labels if it’s clear what each icon means, or else visitors will struggle to navigate your website.

When you’re happy with the menu item setup, click on ‘Save Changes’. Repeat the process to add an icon to other menu items. Once you’ve finished, don’t forget to click on the ‘Save Menu’ button. The updated navigation menu will now be live on your website.

If you liked this article, then please subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Facebook.

Leave a Reply