How to Add Social Icons to Primary Menu

by | Last Updated: Mar 13, 2017 | Blog, Divi theme

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.

 

Social Icons Primary Menu

 

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.

5 Free WordPress Plugins You Should Use

Disclosure: This website is not owned by Elegant Themes. Some of the links on this website are affiliate links. That means that I will get paid a commission if you use them. This however does not influence my opinions, as I'm personally using these products and am satisfied with them.

Share This