All Collections
Troubleshooting and FAQs
Frequently Asked Questions
Header and Footer Areas
How To Add More Social Icons To Divi Default Header And Footer
How To Add More Social Icons To Divi Default 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 some social page links in both the header and footer: 

By default, you can add the following icons:

Facebook
Twitter
Instagram
RSS


To enable those icons, go to Dashboard > Divi > Theme Options and look for these settings:

However, you may want to add something other social page links 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.

• To add a social icon, for example, LinkedIn, add a code section like the following, just before the closing </ul> in the social icons code above:

<li class="et-social-icon et-social-linkedin">
<a href="http://in.linkedin.com/in/elegantthemes" class="icon">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>

• To add YouTube, you’ll add something like,

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

• To add a Pinterest icon, you’ll need to add,

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

• To add a Myspace icon, you’ll need to add,

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

You see the pattern. You can repeat the codes for more social icons.

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 in Theme Options > Custom CSS box. Here's the CSS for the MySpace icon.

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

A couple of other icons CSS:

.et-social-google-plus a.icon:before { content: '\e096'; }
.et-social-pinterest a.icon:before { content: '\e095'; }
.et-social-linkedin a.icon:before { content: '\e09d'; }
.et-social-tumblr a.icon:before { content: '\e097'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }

You can add more icons referring to the icon list pages:

For example the Envelop icon has the code listed:

&#xe076;

You can remove &#x from the front and ; from the end

So your CSS will be like this:

 content: '\e076';

Final result with multiple custom icons added:

If your new social network is not on the list, then you can use a custom PNG image icon.

First, find a correct icon image file and upload the Image in WordPress Dashboard > Media. Be sure to upload an image that has the same size/style as the other icons.

Get the URL of the image file.

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.

Did this answer your question?