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 Responses to Divi Tutorial: How to add social icons to your navigation bar

  1. BSITE June 4, 2019 at 9:58 am #


  2. Seema February 21, 2019 at 9:19 am #

    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.

    • David Tierney February 21, 2019 at 5:56 pm #

      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.

      • Seema February 22, 2019 at 5:00 am #

        Hi David,
        Thanks for your prompt response. My site is on a temp url. Can I email it to you?


      • David Tierney February 23, 2019 at 9:35 am #

        Typically not without starting paid work but in this case go ahead. I will take a look at it for you. Use my contact form.

  3. Cindy February 18, 2018 at 4:47 am #

    Thank you for these straightforward instructions, it worked perfectly.

  4. Callie Turner February 7, 2018 at 8:45 am #

    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.

    • David Tierney February 7, 2018 at 2:31 pm #

      CSS is very specific to the implemention – your website. If you want to email me a link to the page and tell me exactly what you want, I could take a look at it.

  5. Hannah December 8, 2017 at 9:00 am #

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

    • David Tierney February 18, 2018 at 7:43 pm #

      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.

  6. Enrico October 30, 2017 at 11:28 am #

    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

    • David Tierney November 1, 2017 at 12:49 pm #


      • Enrico November 4, 2017 at 8:06 am #

        Fine, any suggestion?

      • David Tierney February 18, 2018 at 7:39 pm #

        Well, I must have busy earlier to just say, CSS. However looking at your site it looks like you figured it out. Yes?

  7. Jaroslava Vagner Svensson October 8, 2017 at 3:12 pm #

    Thank you! This is so much better than calling on Font Awesome if it not needed anywhere else on the website. Super!

  8. John September 28, 2017 at 7:49 am #

    Tried it for our Facebook page and only got a tiny square box in my top menu. Any thoughts?

    • David Tierney September 28, 2017 at 11:53 am #

      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. Join the Conversation!
Did that help? Do you have questions?

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.


Pin It on Pinterest

Share This

Share This

Share this post with your friends!