{"id":12298,"date":"2019-07-28T05:36:46","date_gmt":"2019-07-28T03:36:46","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12298"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-add-icons-in-your-divi-menu","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-add-icons-in-your-divi-menu\/","title":{"rendered":"How to add icons in your Divi menu"},"content":{"rendered":"\n

Ever wondered how you can add an icon in front of your menu items in your Divi menu<\/a>? For example, an icon of a house Infront of your Home page.<\/p>\n\n\n\n

This is very easy to accomplish and we will be doing this right now.<\/p>\n\n\n\n

You can see an example of Divi icons<\/a> in your menu here.<\/p>\n\n\n

\n\nView Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

This demo is a part of the Divi header guide series which start of with creating a custom Divi header<\/a><\/p>\n\n\n\n

Step 1: Adding Font Awesome Kit<\/h2>\n\n\n\n

We need to add one line of code in able to use font awesome icons. Go to their website and enter your email address:<\/p>\n\n\n\n

Update: <\/strong>To add Font Awesome icons to Divi<\/a> use this link.<\/p>\n\n\n\n

\nhttps:\/\/fontawesome.com\/start\n<\/div><\/figure>\n\n\n\n
\"Font<\/figure>\n\n\n\n

Go to your email and confirm, after setting up your password you will be redirected to the code.<\/p>\n\n\n\n

\"Copy<\/figure>\n\n\n\n

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

\"copy<\/figure>\n\n\n\n

Step 2: Adding the icons to the Divi menu<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Font<\/figure>\n\n\n\n

Then go to Appearance > Menus<\/p>\n\n\n\n

Paste the code before your menu item.<\/p>\n\n\n\n

\"Insert<\/figure>\n\n\n\n

You can do this for every menu item if you want.<\/p>\n\n\n\n

Step 3: Change the color of the icons<\/h2>\n\n\n\n

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<\/a> CSS folder.<\/p>\n\n\n\n

To target all the icons, use this snippet:<\/p>\n\n\n\n

.fas {\n\tcolor: #ff6c03;\n}<\/code><\/pre>\n\n\n\n
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<\/p>\n\n\n\n
\"Hightlight<\/figure>\n\n\n\n
Then the CSS will be like this:<\/p>\n\n\n\n
.fa-home {\n\tcolor: #ff6c03;\n}<\/code><\/pre>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n