Creating custom menu icons in the Avada WordPress theme

WildPress 9th Jan 2020

Problem

You’re using the Avada WordPress theme and you want to use custom menu icons for your main menu. Avada lets you use the FontAwesome icon library, but not your own icons.

This tutorial will show you how to add some custom CSS in order to add your own custom menu icons to the Avada main menu.

Prerequities

  • Basic knowledge of CSS
  • Basic knowledge of configuring Avada Settings

Solution

Watch the video tutorial

https://youtube.com/video_url

1. Enable custom CSS classes for menus

Firstly, we need to add custom CSS classes to the menu items. This will allow us to write CSS rules to target the menu items and add the custom icons.

  1. Navigate to the Appearance > Menus page in the WordPress Admin menu.
  2. Using the Screen Options tab in the top right of the screen, make sure the CSS Classes checkbox is ticked.

2. Configuring the individual menu items

Next, we need to add a custom CSS class to each top-level menu item, which we want to have an icon for. The CSS class can be whatever we want, but it should include a prefix we can reference for each icon, so we don’t have to write a lot of custom CSS rule for each menu item.

  1. Expand one of the top-level menu items, by clicking the menu item.
  2. Add a custom CSS class to the CSS Classes input field. e.g. custom-icon-menu-item-name
  3. Add the custom CSS class to each menu item you want to have an icon, keeping the custom-icon- prefix, replacing the menu-item-name with a name based on your menu item. Make sure only use lower-case characters and hyphens instead of spaces.

3. Configuring the individual Avada Menu Options

Once the menu item classes have been added, we need to configure the Avada Menu Options for each menu item. This will set a default icon for each menu item.

  1. For each menu item click the Avada Menu Options button and perform step 2.
  2. In the options pop-up, scroll down to the Icon Select setting and choose an icon. Choose any icon, as we’re only using it as a placeholder and will replace it with our custom icon later.
  3. Save the menu item settings for each menu item.
  4. After you’ve updated all the menu items, click the blue Save Menu button to save all the settings we’ve just updated.

4. Adding the custom CSS to display the menu items

Finally, we need to add the CSS rules to override the Avada icons and replace them with our own custom icons.

  1. Navigate to the Avada Custom CSS settings page. You can find this page at the bottom of the Theme Options sub menu item, which is under the Avada main menu item.
  2. We need to add 2 CSS rules to set-up the styling for the icons and one additional rule for each menu icon you want to display.
  3. Once we’ve added the

4.1 First CSS rule – Setting the icon display properties

The first CSS rule we’re adding sets the height and width of the HTML element we’re going to use to display the icon. We can adjust the height and width properties to resize our icons.

/* Set the display properties for the custom icons */
[class*='custom-icon-'] .fusion-megamenu-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px !important;
    width: 25px !important;
}

4.2 Second CSS rule – Hiding the default icon

This rule will hide the default Avada menu item icon.

[class*='custom-icon-'] .glyphicon {
    display: none;
}

4.3 Additional CSS Rules for each menu item requiring an icon

We should create a rule for each menu item that has an icon. Replace the menu-item-name text with correct text for the specific menu item. Make sure you replace the background-image url with the URL for your icon.

.custom-icon-menu-item-name .fusion-megamenu-icon {
    background-image: url('https://p7w8y5x5.stackpathcdn.com/wp-content/uploads/custom-icon.png');
}

Contact Us

Can't find an answer to your question and need our help?

Send us an email and we'll do our best to get it answered for you.