All Collections
FAQ's and Troubleshooting
How to add icons to the Menu items using FontAwesome SVG files
How to add icons to the Menu items using FontAwesome SVG files

Add custom icons to the Menu items using FontAwesome, WordPress Menu system and Divi

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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

  1. Go to Appearance > Menus

  2. Open the Screen Option

  3. Enable the CSS Classes

  4. For each Menu item that is going to display an icon, set the following CSS classes divi-icon-menu-item divi-shop-menu-item

    Set the CSS class for the 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 icon

    • divi-shop-menu-item - unique CSS class assigned to a specific menu item. This will add unique CSS styles for that icon, like the color.

  5. Open the FontAwesome website and find the icon(s) you want to use

    Fontawesome icon

  6. Click on the SVG Tab and copy that entire code to your clipboard

    Get the icon's SVG code

  7. Edit the Menu item, and on the left of the actual menu text, paste the SVG code copied from the FontAwesome website

  8. Paste the SVG code to Menu item's label

  9. Save the menu changes by clicking the Save Menu button at the bottom right corner.

    Using SVG icons as Menu Label

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.

  1. 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;


  1. 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-item CSS class

  2. Each menu item should have the general CSS class divi-icon-menu-item and a unique class divi-{menu-item}-menu-item where the {menu-item} is going to be unique to each menu.


Example of different colors set on different menu icons
  • The Shop Menu item has the CSS classes divi-icon-menu-item divi-shop-menu-item

  • The Contact Menu item has the CSS classes divi-icon-menu-item divi-contact-menu-item

  • The 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;
Did this answer your question?