[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to add icons in your Divi menu

Mark Hendriksen | July 28, 2019 | 0 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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 Divi icons in your 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:

Update: To add Font Awesome icons to Divi use this link.

https://fontawesome.com/start
Font Awesome get the tool kit

Go to your email and confirm, after setting up your password you will be redirected to the code.

Copy the Font Awesome code

Copy the code and paste it in Divi > Theme Options > Integration > Add code to the < head > of your blog

copy / paste the code

Step 2: Adding the icons to the Divi menu

Now we are going to add icons to 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.

Font Awesome home icon

Then go to Appearance > Menus

Paste the code before your menu item.

Insert font awesome code

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:

.fas {
	color: #ff6c03;
}

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

Hightlight CSS class

Then the CSS will be like this:

.fa-home {
	color: #ff6c03;
}

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment

1 Shares
Share1
Pin
Tweet