How to add icons in your Divi menu
Ever wondered how you can add an icon in front of your menu items in your Divi menu? For example, an icon of a house Infront of your Home page.
This is very easy to accomplish and we will be doing this right now.
You can see an example of icons in your Divi menu here
This demo is a part of the Divi header guide series which start of with creating a custom Divi header
Step 1: Adding Font Awesome Kit
We need to add one line of code in able to use font awesome icons. Go to their website and enter your email address:
Go to your email and confirm, after setting up your password you will be redirected to the code.
Copy the code and paste it in Divi > Theme Options > Integration > Add code to the < head > of your blog
Step 2: Adding the icons to the Divi menu
Now we are going to add icons in your Divi menu. Go to the Font Awesome website and choose the icon(s) that you want to use.
For example, I searched for home and I get a list of home/house icons, click on the one you like and copy the code.
Then go to Appearance > Menus
Paste the code before your menu item.
You can do this for every menu item if you want.
Step 3: Change the color of the icons
If you want to change the colors of the icons but not of the text you can do this by adding this CSS snippet to Divi > Theme Options > CSS or in your Divi child theme CSS folder.
To target all the icons, use this snippet:
To target individual icons, you need to find the unique CSS class for that icon, for example the home icon has the class fa-home
Then the CSS will be like this: