How to add icons in your Divi menu

by | Jul 28, 2019 | Divi tutorials | 0 comments

How to add icons in the 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:

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

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:

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:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

1 Shares
Share1
Tweet
Pin
Buffer