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!

Thanks for reading.

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

Share your results, feedback or other comments below.

18 thoughts on “Divi Tutorial: How to add social icons to your navigation bar”

  1. Unfortunately this does not work for me. I’m not seeing any icon but just arrows and dashes. I was looking forward to putting an icon without loading font awesome!
    I believe I have no choice but to go ahead with that option!
    Great Tutorial.

    1. I am sorry that it did not work for you. If you want to share a live link with me, if it is live, I can look at the site and code through my browser and see if I identify anything obvious to me that is the problem.

  2. Hello – this is great – best one I’ve found yet and worked. However, how do I change the color of the FB icon from black to blue or adjust it so it has a circle or rectangle around it? I understand that would be CSS – but I’m not a coder. Any assistance would be appreciated.

  3. Hi David,

    Awesome tutorial helped me a lot. But the icon-font is too big of a size.. any advice for me? I’ actually a beginner when it comes to css. Don’t know the code for it..

    1. Hi Hanna. Depends on exactly where on your website you put the icons but if you used it in your header menu than something like this might help in your CSS:

      #top-menu li i {font-size:0.9em;}

      or you can plan with that number and try 0.85 or 0.8. If that does not work, then you might need to provide your website address so I can look at the code of your site.

  4. Hi David, awesome tutorial. I’ve been able to successfully add the icons on the desktop site. But when you navigate the mobile menu, social icons are too close and are useless. How can I put some space in between, or place each of them on a row of their own? Thanks in advance

    1. I would have to look at it on your site. I checked and it is not there now. It will show as a square box in the menu admin interface because that interface is not using the right font for display. But when you add the class et-pb-icon to that menu item as in the tutorial, that class should cause divi to change the font-family in the css to use the font-family ETmodules which will transform it from a square to your icon. If you have a square on your front end, what the user would see on your website, then for some reason that font family is not being applied to that link – either you improperly added that class name to that menu item as in the tutorial or there is some custom css overriding it.

      You can give me a call and I can look at the code of it when you have it up and I should be able to tell you what is up. (707) 965-9727

Leave a Comment

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

Need Help with Your Website?

Why not get it done FASTER and EASIER with help from a friendly, helpful Professional?

Call (707) 965-9727

Or use our Contact Form

I am located in Northern California, U.S.A.


Scroll to Top