Divi Tutorial: How to add social icons to your navigation bar

I am a web designer in Napa, California. There are many ways to add social icons or other icons as links in your website’s navigation bar. You can do so on any website relatively easily using Font Awesome or other icon font libraries and tool sets. Scroll to the bottom of this post for a list of resources related to icon fonts, including Font Awesome resources and guidance.

Today I want to show you the specific steps to do this for a WordPress install using the very popular Divi WordPress theme. (I recently gave Divi my best WordPress theme for 2017 vote).

If you do not know about Divi, click one of the links above to learn more.

Let’s get to work. We are going to make something like this:

Log into your website and go to your Menus page in the admin (Appearance>Menus).

At the top right of the page look for “Screen Options”. Click the words to pull down the screen options for the Menus page.

Tick the boxes for Link Target, Title Attribute and CSS Classes. You only NEED the CSS Classes but I will show you options for using the others. Then click “Screen Options” to push the menu backup and away.

Select the menu you want to add your links to. If you want to create a top bar menu and do not have one yet, you can reference this page with steps. Then tick the box next to Secondary Menu under Menu Settings at the bottom of the Menu page and Save.

Adding a New Navigation Menu Link

Now on the left side of the page click on “Custom Links” as that is how we are going to add our links.

Adding Facebook icon

For a link to your Facebook page using the Facebook icon, enter the url to your Facebook page in the URL box.

Now you want to enter the following into the “Link Text” field: 

If you want another Divi Icon Font, go to this page and scroll down to below where it says, “Complete Set and Unicode Reference Guide” and look for the code under the icon you want. For example here is the Facebook icon code:

Now click the “Add to Menu” button.

Then go to your new link and click to open it to show its settings. The Navigation Label may look different, like in the image below, that is fine. In the CSS Classes you want to add: et-pb-icon. This is the class the Divi theme uses for its icon fonts but really the only style needed it to assign the font family as ETmodules. So if you prefer you can use your own CSS class and assign that font family to it. That will convert the Navigation Label to the icon you want to see.

Optionally you may want to have your link open in a new window when a user clicks it. If you do, click this box.

And for Title Attribute you can put some words indicating what will happen when a user clicks the link. This will show up to your user if they hover over the icon with their cursor. It also helps you know when looking at this custom link in the admin where it goes.

That is it. Save your menu. You just created your Facebook icon as a link to your Facebook page.

You can style it in two ways. The first is by going to the Theme Customizer and editing the styles for the navigation menu you added it to.

Troubleshooting Tip: For me when I first added the icons to the menu, for some reason the icons were huge. I change the font size from what it was showing as 12 pixels to 13 pixels and then back to 12 and it fixed it.

You can also use CSS to assign new styles. To do this you can add another unique css rule to the CSS Classes and then apply your styles to it, changing it’s color, positioning or size for example to a unique color, positioning or size for that icon.

Adding your Twitter icon

And you can create your Twitter icon the same way using the code for Twitter on this page and looking below “Complete Set and Unicode Reference Guide”.

Adding a Telephone link

You can easily add links for your telephone number and email address if you want. If you put tel: before the number as in the image below, it should become a link that can be clicked on a smart phone to call.

For an email address you use the format mailto:name@domain.ext. And for the Link Text you can display your phone number or an icon for a phone – or email as you like.

The end result might look like this:

More Icon Font Resources

UPDATE: If you want to use the Font Awesome fonts, the links below have helpful information but you will want to use the updated fonts using the updated script. That means go to this font awesome page and add the code after the words “Use Font Awesome Free CDN” to your header and then when you are adding the code notice that the old font awesome classes used fa whereas the new ones use fas or fab or possibly other variations. Just use what is given on the font awesome page for the icon you want to use and that will work. Good luck and leave a comment below if that helped!

• How to Add Font Awesome Icons to WordPress Menus
• How to Use Font Awesome On Your WordPress Website
• Using Font Awesome with Divi
• Convert Icon Fonts (Font Awesome included) to PNG (Great to mock up in designs)

Thanks for reading.

Are you going to try this? Did you try it?

Share your results, feedback or other comments below.