Friday, April 3, 2020

How to add icons to the menu with Divi and Font Awesome

Adding our social channels to our web pages can be an excellent way to get feedback from users who read or consume our content and services.

In this tutorial, we will explain two ways to include the icons in your Divi menu. Let’s see how to add them and align them.

1.  WP Menu Icons

WP Menu Icons is a plugin that helps you to handle the hard work and provides you with an easy and comprehensive interface to include the icons in your menu.

This plugin allows you to include icons in your Divi menu with the most popular icons fonts in the default WordPress icons called Dashicons and the most popular in the market: Elegant Icons, Elusive Icons, Foundation Icons, and Themify Icons.

WP Menu Icons

1.  Add Divi Menu Icons

a. Add Font Awesome

First of all, we must install Font Awesome via CSS. In the Divi theme options, we go to the Navigation option and paste the following code in the “Head” section. From this step, Font Awesome will allow you to use icons on your website that you can choose from a variety of more than hundreds of them.

b. Create a primary menu

It is likely that you already have a created primary menu, but if you have not already done so, it is very easy. Go to the “Menus” section of “Appearance” in your Control Panel.

Then, give the menu a name and add the pages you need.

c. Add the icons of Social Networks

Adding social icons with Font Awesome and Divi is very easy. There are icons for a large number of social networks. We recommend that you add the main social networks, unless the main theme on your page is something quite specialized, for example you could add the Yelp so that users can see your reputation and opinions of the guests, or TripAdvisor.

Locate on this page of Font Awesome the icon of the social network you want to add, for example, the Facebook.

In “Pages”, locate the “Custom Link” option.

You will see that first there is a field that says “Custom Link”. Copy the code of the icon you have chosen there. In the case of Facebook, for a rounded icon of 3px the code is

Then you will see the URL option. Enter the URL of the Instagram profile to which the button should be directed.

Copy the same code that you just used in the “Navigation label” section.

If you want to use other icons, follow the same process.

If you want the icons to open in a new tab, delete the URL and paste the following code in “Navigation label”.

Did you see how easy it is? See you in the next post!

Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply