All Collections
FAQ's and Troubleshooting
How To Add More Social Icons To Divi Header And Footer
How To Add More Social Icons To Divi Header And Footer
How to add more social media icons to Divi
Cristi avatar
Written by Cristi
Updated over a week ago

The Divi theme offers the option to add your social links in both the header and footer: 

By default, you can add the following icons:

Facebook
Twitter
Google+
Instagram
RSS


To add those icons, go to Dashboard > Divi > Theme Options

However, you may want to add something other than what's available. For that, we will need to use a child theme, so get one ready and follow these steps:

Navigate with FTP or cPanel file manager to your WordPress root folder, and copy the following file: wp-content\themes\Divi\includes\social_icons.php

Go to your child theme folder, create a new folder and name it: includes
Copy the social_icons.php file inside this folder, and open it with your editor.

At the end of the file, before the </ul> tag, paste the following code: 

<li class="et-social-icon et-social-myspace">
    <a href="https://myspace.com/elegantthemes/‎" class="icon">
        <span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
    </a>
</li>


Replace myspace and MySpace with the new social network's name, and replace the link.

Divi has already icons set for the following social networks, so you don't have to worry about the icon / image file if your new social network is on the following list, all you have to do is copy the name:

pinterest
linkedin
tumblr
skype
flikr
myspace
dribbble
youtube
vimeo

It was enough until the Divi Performance release. Since then, this method requires two more things to add the additional icons because now the Divi Theme doesn't render all of the fonts by default to optimize the loading speed. It loads the ones we use from the Divi Builder or the built-in icons available in the Theme Options.

1) We need to disable the Dynamic Icons option to extend the icons.

2) And need to add custom CSS. Here's the CSS for the MySpace icon.

.et-social-myspace a.icon:before {
content: "\E0A1";
}

A couple of other icons CSS:

.et-social-youtube a.icon:before {
content: "\E0A3";
}
.et-social-linkedin a.icon:before {
content: "\E09D";
}
.et-social-pinterest a.icon::before {
content: "\e095";
}

You can add more icons by taking the icon's content code from this article by inspecting it.

If your new social network is not on the list, then use the following code instead:

<li class="et-social-icon et-social-myspace">
    <a href="https://myspace.com/elegantthemes/‎" class="icon">
    <img src="https://site.com/icon.png" alt="myspace">
        <span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
    </a>
</li>


And again, replace myspace, replace the URL of the account, and the image URL.

Be sure to upload an image that has the same size/style as the other icons.

Did this answer your question?