Enhancing your website’s visibility and user engagement is easy with additional social icons in Divi’s default header and footer. Adding more social icons can connect visitors to your various social media platforms, encouraging interaction and expanding your online presence.
This article will guide you through the steps to add more social icons to Divi’s default header and footer, ensuring seamless integration and improved connectivity.
The Divi theme offers the option to add a few Social Media platform 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, if you may want to add more Social Media icons besides the ones that are already available, you will need to use a child theme, so get one ready and follow these steps:
Using an FTP client or cPanel File Manager, navigate to WordPress root folder/wp-content/themes/Divi/includes
Copy the social_icons.php file
Navigate to WordPress root folder/wp-content/themes/your child theme folder
Create a new folder and name it includes
Paste in the social_icons.php file copied at step 2
Open the social_icons.php file into a code editor
To add a social icon, for example, LinkedIn, add this PHP code just before the closing
</ul>tag:<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 a YouTube icon, use the following PHP code:
<li class="et-social-icon et-social-youtube">
<a href="http://youtube.com/elegantthemes" class="icon">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>To add a Pinterest icon, use the following PHP code:
<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>
You see the pattern. You can repeat the codes for more social icons.
Replace pinterest and Pinterest with the new social network's name, and replace the links.
Divi already has icons 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
flickr
dribble
youtube
vimeo
Important Notes:
With the Performance updated for the custom icon to appear correctly, you need to deactivate the Dynamic Icons option in Divi → Theme Options → General tab → Performance tab
Custom CSS code has to be added to Divi → Theme Options → General Tab → Custom CSS actually to render the icons. For example, to render the Pinterest icon, this CSS code can be used:
.et-social-pinterest a.icon:before {
content: "\e095";
}
A couple of other icons CSS:
.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 Elegant Icon Font List page
For example, the Envelop icon has the code listed:  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:
You can use a custom PNG image icon if your new social network is not on the list.
Find the correct icon image file and upload it to WordPress Dashboard → Media. Make sure the image is the same size/style as the other icons.
Get the URL of the image file.
Use the following code instead:
<li class="et-social-icon et-social-tiktok">
<a href="https://myspace.com/elegantthemes/" class="icon">
<img src="https://site.com/icon.png" alt="tiktok">
<span><?php esc_html_e( 'Tiktok', 'Divi' ); ?></span>
</a>
</li>
In the example code, replace tiktok, the account URL, and the image URL.