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.

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:

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.

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

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:

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

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com