How to Add Images or Icons in the Navigation Menu

Adding images to your WordPress menu items can enhance the user experience and make your website more visually appealing. However, not all WordPress themes come with built-in options to add images to menus.

In this guide, you will learn how to add images or icons to the navigation menu on your website using Astra Pro and other options.

Add icons with the Nav Menu module of Astra Pro

With the Astra Pro Nav Menu module, you can add images, icons or highlighted text to the navigation menu in the header.

It allows you to easily add images to your menu items and customise their appearance.

By following these step-by-step instructions, you’ll be able to create a more engaging and attractive website for your visitors. Let’s get started!

Note: Please note the Nav Menu module is a premium addon available in Astra Pro. If you have not installed Astra Pro yet, please check this guide.

Step 1: Enable the Nav Menu module of Astra Pro

Navigate to Astra Dashboard and enable the Nav Menu module as shown.

Step 2: Astra Menu Settings

Once the Nav Menu module is enabled, you can see the Astra Menu settings for the menu items under Appearance >> Menus. And select the menu that you wish to add the images or icons to.

Step 3: Astra Nav Menu Options

Click on Astra Menu Settings button highlighted in the screenshot shared below and you will see the right panel showing the Astra Menu options where you can customize the menu items with the Nav Menu module.

You will see the following options after clicking the Astra Menu Settings button:

Mega Menu: You can enable the Mega Menu and display the submenu items in a beautiful multi-column mega menu. Learn more about it here: [Create a Mega Menu with Nav Menu Module].

Icons: We will use this option to add icons or images to the navigation menu. You may select from the icons library or upload a custom image.

Highlight Labels: This allows displaying text beside the menu items. For example, Sale, New, Featured, Offer, etc.

Step 4: Add images or icons in the navigation menu

Now, to add the icons or images for a menu item, simply select the icons from the library or upload an image.

Select the placement, size and spacing of the icons and save changes. Switch to the design tab to modify the icon view and colours.

Here is how the front will appear once the icon is added to the menu items:

You may play around with the spacing, icon size, icon view options (framed or stacked) and design a beautiful navigation menu.

Please note that the above option with the Nav Menu module works only with the header navigation added with the Astra theme.

If you wish to add the icons to the navigation menu, you can use another approach shared below.

Add Font Awesome icons to the navigation menu

With this approach, you can add the Font Awesome icons to any navigation menu on the website, whether it is in the header, footer or sidebar widgets. Please follow the below steps:

Enable Font Awesome Support

The important step for adding the Font Awesome icons to the website is enabling Font Awesome icon support on the website. For this, you can install the Font Awesome Icons plugin.

1. Install the Font Awesome Icons plugin from the WordPress repository

2. Choose the icon you wish to add to the navigation menu from the Font Awesome Icons library.

3. Copy the HTML code of the icon you wish to add. Before copying the code, you can modify the colours, add animation effects.

4. Navigate to Appearance >> Menu >> Select the Menu and add the HTML code in the menu item navigation label.

5. Save the changes, and it checks the front. It will appear on the entire website where the navigation is used.

You can customise this further with CSS or Font Awesome styles.

Some tips while using icons in the navigation menu:

1. Make sure the images you use are of the appropriate size and aspect ratio for your menu. Images that are too large or too small can look distorted or pixelated.
   
2. Consider using images that are relevant to the menu item they represent. This can help users quickly identify the content they’re looking for.
   

In conclusion, adding images to your WordPress menu items can significantly enhance the user experience and make your website more visually engaging. By following the steps outlined in this article, you can easily add custom images to your menu items and adjust their appearance using the built-in options provided in the Astra Nav Menu module or with a little bit of custom CSS.

We hope this helps. If you have any further queries, feel free to share your feedback below.