The Easiest Way to Add Social Icons to the Divi Main Menu

It’s very common to want to add social icons to a website’s main menu. When using the Divi theme, you can do this by using the Divi Builder to create a custom menu. But, if you’re not already using a custom menu for other reasons, that might be more work than necessary.

Social icons in Divi main menu
Social icons in the Divi main menu

In this article, I’ll give you the best and easiest way to add social icons to the standard Divi main menu. The icons will be correctly positioned on desktop and mobile!

Why This Method Is Great

There are lots of ways to add social icons to a Divi main menu. Some require adding external libraries like Font Awesome, either manually or by installing a plugin. But why do that when Divi comes with the Elegant Themes Icon Font, which contains a bunch of icons built in? In this method, you’ll use the built-in Elegant Themes font; no additional font libraries or plugins required!

Without further ado, here are the steps:

1. Disable Divi Dynamic Icons

When I first tried this technique, I was mystified because not all of the social icons were showing up. I eventually figured out the reason: Divi’s performance optimization setting was preventing all of the icons from loading.

To fix this, go to Divi -> General -> Performance and disable Dynamic Icons:

Divi Dynamic Icons setting
Turn off Divi’s Dynamic Icons in the Performance Tab

2. Add the Menu Items

Next, add the main menu items for the social icons you want. In the URL field, add the URL of the social network.

In the Navigation Label field, add the following span, substituting the name of the social network you are using, which in this case is Instagram:

<span class="divi-instagram"><span class="sr-only">Instagram Page</span></span>

Note that the inner <span> is purely for accessibility compliance, so that the link isn’t empty of text. We’ll remove it later using CSS.

So, for Twitter, you would have this:

<span class="divi-twitter"><span class="sr-only">Twitter</span></span>

You get the idea. Repeat as needed.

Social icons in Divi menu
Instagram icon in the Divi main menu (shown without the inner <span> which I added later)

3. Add the Icon CSS

The next step is to add the CSS. You can add the CSS to your child theme or in the Customizer under “Additional CSS”. The CSS will be in this format:

/* SOCIAL ICONS IN DIVI HEADER */
/* https://brianshim.com/webtricks/social-icons-in-divi-main-menu/ */
.divi-instagram:after {
	content: "\e0b1";
	display: block;
	font-family: "ETmodules";
	font-weight: normal;
	font-size: 36px;
}
.divi-twitter:after {
	content: "\e0ab";
	display: block;
	font-family: "ETmodules";
	font-weight: normal;
	font-size: 36px;
}

/* HIDE SCREEN READER TEXT */
.sr-only{
   position:absolute;
   left:-10000px;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
}

Substitute the name of the social networks you are using for “instagram” and “twitter” in this code.

Next, we’ll take care of the “content:”.

4. Replace the Correct Content Codes

For the content, this Elegant Themes blog post has a list of every icon with its code (scroll toward the middle of the page).

Elegant Themes Icon Font
Elegant Themes Icon Font

For example, under the Facebook icon, it has “&#xe093;”. The code you need from that is the “e093” part. Add a backslash to the beginning and substitute it in the “content:” line of your CSS like I did in my code. Repeat for all of your social networks.

Here is a cheat sheet with the most commonly used social network icon codes:

IconCode
Facebook\e093
Twitter\e094
Pinterest\e095
Instagram\e09a
Vimeo\e09c
Linked In\e09d
YouTube\e0a3
Round Facebook\e0aa
Round Twitter\e0ab
Round Pinterest\e0ac
Round Instagram\e0b1
Round Vimeo\e0b3
Round Linked In\e0b4
Round YouTube\e0ba
Square Facebook\e0c1
Square Twitter\e0c2
Square Pinterest\e0c3
Square Instagram\e0c8
Square Vimeo\e0ca
Square Linked In\e0cb
Square YouTube\e0d1

Note that you’re not limited to social icons here, you can use this for any icon in the font!

5. Adjust Alignment

When I used the above CSS, the menu items and social icons were not vertically centered. To fix that, I added this CSS:

ul#top-menu li {
	vertical-align: top;
}

6. Adjusting Alignment on Mobile Menu

On mobile, you may want the icons to be in a horizontal row instead of stacked vertically. To do that, you’ll need to add some CSS to target the <li> elements of the icons like this:

#mobile_menu_slide .menu-item-1962, 
#mobile_menu_slide .menu-item-1959, 
#mobile_menu_slide .menu-item-1963 {
    float: left;
    margin: 10px 10px 0 0;
}

Your menu item numbers will be different. Use your browser’s inspector to get them. Also, this code is for the Divi slide-out mobile menu. If you use a different type of mobile menu, your code could be different. Again, use the inspector.

Conclusion

Save, clear cache, and check your menu on the front-end. You should be good to go! Let me know what you think in the comments. I hope this was helpful to you! – Brian

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 Comments
Inline Feedbacks
View all comments
Elise B
4 months ago

Thank you! I’ve been searching everywhere for an easy solution to put social icons in Divi’s menu – especially with a mobile horizontal alignment!

This worked like a charm and looks so good both on desktop and mobile. Now if only ET would update its icons to include TikTok. :)

Thanks again!

Anna T
6 months ago

This is awesome~ Question! Do you know how to have the social media icons side by side in mobile view? so it’s not like on top of each other?

Anna T
6 months ago
Reply to  Brian Shim

Nice! Thank you! I’ll try it out~