UPDATE: It is already possible to design a completely custom header for your Divi website using the Divi Theme Builder feature. You can read more about this in my other article on how to design a custom header with Divi.

The Divi theme has the social sharing icons by default shown in the footer and in the secondary menu bar (if you have the secondary menu enabled). But have you ever wanted to have them in your primary menu? If yes, I will explain you in this post how you can do it.

 

 

The Divi theme includes “Etmodules” font family that are actually the social icons graphics. We will be using them. In your WordPress admin panel navigate to Appearance > Menus and if you don’t have a menu created yet, create one. I suppose you already know how to work with WordPress menus (you can add your pages as your menu links, etc.). And to add an e.g. Twitter social icon, just add a custom link to your menu and insert the following code into the Link Text field:

 

<span class="divi-twitter"></span>

 

Into the URL field add the target link of this icon. In my case it would be: https://twitter.com/DiviBlog

The process for other social sharing icons (e.g. Facebook, Google+, Instagram, LinkedIn, Pinterest, etc.) is the same. You will just need to change “divi-twitter” to “divi-facebook”, “divi-pinterest”, etc.

However, to make this work we will also need to add some custom CSS code to the Divi Theme options custom CSS field (or your child theme‘s style.css file). We will need to add the following (in my case I’m adding just Twitter and Pinterest icons):

 

.divi-twitter:after {
content: "\e094";
display: block;
font-family: "ETmodules";
font-weight: normal;
}

.divi-pinterest:after {
content: "\e095";
display: block;
font-family: "ETmodules";
font-weight: normal;
}

 

You will need to add codes for all your social icons. And each social icon has a different content code. Here’s the full list:

 

Facebook = content: "\e093";
Twitter = content: "\e094";
Google Plus = content: "\e096";
Pinterest = content; "\e095";
LinkedIn = content: "\e09d";
Instagram = content: "\e09a";
Tumblr = content: "\e097";
Skype = content: "\e0a2";
Flickr = content: "\e0a6";
Myspace = content: "\e0a1";
Dribbble = content: "\e09b";
YouTube = content: "\e0a3";
Vimeo = content: "\e09c";
RSS = content: "\e09e";

 

Well that’s all for this tutorial. I hope I have helped you.

PS: You might also like to check out my other tutorial on how to add social sharing buttons to your WP website (with the Monarch plugin that comes with Divi).