Icons can significantly enhance the appeal of your menu. The appropriate icon gives users a subtle indication of the link's content. Moreover, icons can add a visually pleasing element.
Before we start, we need to take a few steps in preparing everything. For this to work properly, we must have a custom CSS class set on each Menu item.
With that setup using custom CSS code, the icons can be styled for maximum impact.
Preparing the Menu items
Go to Appearance > Menus
Open the Screen Option
Enable the CSS Classes
For each Menu item that is going to display an icon, set the following CSS classes
divi-icon-menu-item divi-shop-menu-item
There are two CSS classes:
divi-icon-menu-item- This will be a general class assigned to all menu items that will use/display a FontAwesome SVG icondivi-shop-menu-item- unique CSS class assigned to a specific menu item. This will add unique CSS styles for that icon, like the color.
Open the FontAwesome website and find the icon(s) you want to use
Click on the SVG Tab and copy that entire code to your clipboard
Edit the Menu item, and on the left of the actual menu text, paste the SVG code copied from the FontAwesome website
Save the menu changes by clicking the Save Menu button at the bottom right corner.
Styling the custom icon
With the help of the custom CSS class set for each menu item at step 4, we can add custom CSS code to make the icon look better.
Go to Divi > Theme Options > General Tab > Custom CSS and add this CSS code:
.divi-icon-menu-item a svg {
margin-right: 10px;
}
.divi-icon-menu-item.divi-shop-menu-item a svg {
fill: red;
}
Note:
The above CSS code will add a space of 10px between the SVG icon and the menu text and a unique CSS color that is going to apply only to the menu item that has the
divi-shop-menu-itemCSS classEach menu item should have the general CSS class
divi-icon-menu-itemand a unique classdivi-{menu-item}-menu-itemwhere the{menu-item}is going to be unique to each menu.
Example:
The Shop Menu item has the CSS classes
divi-icon-menu-item divi-shop-menu-itemThe Contact Menu item has the CSS classes
divi-icon-menu-item divi-contact-menu-itemThe CSS code that was added in Divi > Theme Options > General Tab > Custom CSS:
/*Set the space between the icon and the menu text*/
.divi-icon-menu-item a svg{
margin-right: 10px;
}
/*Set the icon color for the Shop Menu item to red*/
.divi-icon-menu-item.divi-shop-menu-item a svg{
fill: red;
}
/*Set the icon color for the Contact Menu item to purple*/
.divi-icon-menu-item.divi-contact-menu-item a svg{
fill: purple;
}