Divi comes with settings for three social media icons as standard – Google+, Facebook and Twitter. But what if you want to add different icons to the header or footer bar? For this you’re going to need to delve into a bit of code.

First you need to copy a file called social_icons.php into your child theme (if you don’t know how to set up a child theme, see Geno’s tutorial here). Social_icons.php can be found in the “includes” folder in your Divi theme files so you need to create an “includes” folder in your child theme and then copy the php file into it.

 

If you now navigate to Appearance > Editor from within your website dashboard, you will see social_icons.php listed on the right hand side of the screen.

 

Click on social_icons.php to activate it in the editor window. You will see the code for the default three options – Facebook, Twitter and Google+ as well as code for the RSS feed icon that can also be displayed.

 

In this example we’re going to add in a LinkedIn icon. Just after the line <?php endif; ?> and before the closing </ul> tag I am going to add the following:

<li class="et-social-icon et-social-linkedin">
<a target="_blank" href="https://www.linkedin.com/">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>

If you’re adding the code above don’t forget to change the LinkedIn URL to the URL for your own page.

Once you have added the code, click “Update File”. At the moment if you view your site you won’t see the LinkedIn icon appear just yet. For this we need to modify the child theme stylesheet.css file.

Still in Appearance > Editor, click on stylesheet.css to activate that in the editor window.

 

Scroll to the bottom of your child theme and add in the following code:

.et-social-linkedin a:before { 
	content: '\e09d';
}

Then click on “Update File”.

 

If you now go to your website and refresh the page, you will see the added icon (in this case, in the footer of the website).

 

What if you want to add icons other than LinkedIn? Fortunately Divi comes with a number of icons already included. There are five areas where you will need to modify the code above depending on which social icons you would like to include:

<li class="et-social-icon et-social-linkedin">
<a target="_blank" href="https://www.linkedin.com/">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>
.et-social-linkedin a:before { 
	content: '\e09d';
}

The codes you need for each are as follows:

Dribble = e09b

Flickr = e0a6

Instagram = e09a

Myspace = e0a1

Pinterest = e095

Skype = e0a2

Tumblr = e097

Vimeo = e09c

YouTube = e0a3

 

So, for example, if you wanted to add a Skype icon the code you’d need to add would be:

<li class="et-social-icon et-social-skype">
<a target="_blank" href="https://www.skype.com/">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>
.et-social-skype a:before { 
	content: '\e0a2';
}

 

You can add other social icons in the same way.

Note: You can also add many social media icons with the Divi Booster Plugin.

Babs Hobbs
Babs provides website design and development services, SEO and social media strategy services. She is based in Glasgow, Scotland, and loves Apple gadgets, coffee, "Orange is the New Black" and a decent Sauvignon Blanc.