Divi currently only offers the option to add Facebook, Twitter, Google+ & RSS as social icons to your header and footer, but nowadays with the increased usage of social media this small selection of icons is no longer enough.
I am going to show you how to add additional social media icons to your header and footer.
Firstly, if you are using a child theme, which you absolutely should, you will need to access your theme folder, either via FTP or via your hosting file options.
In your child theme folder, you will need to create a folder called “includes” (this is of course if you don’t already have one!), then you will need to drag and drop the Divi “social_icons.php” file. You can find this file inside the Divi folder under includes.
Okay, so now to the fun part. Here’s a list of the social media icons that can be added and their CSS code.
.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-instagram a.icon:before { content: '\e09a'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-myspace a.icon:before { content: '\e0a1'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }
So let’s say you are looking to add Instagram to your footer. You will have to copy the code above that relates to instagram and paste it in your child theme stylesheet. Be sure to update the stylesheet once you’ve added it in.
Once you’ve done that, you should be able to see your social_icons.php file in the same place you would normally go to edit your stylesheet (Appearance > Editor) and add the following code just before the </ ul> closing tag.
<ul>
<li class=”et-social-icon et-social-instagram“><code><a class=”icon” href=”YOUR URL“>
<!–?php esc_html_e( ‘Instagram‘, ‘Divi’ ); ?–></a></code></li>
</ul>
I’ve bolded above the places where you will need to make changes to depending on which social icon you are looking to add and of course the URL to your social media profile. Be sure to replace the bold sections with the correct name for the social media according to the list of CSS codes above.
Once you’ve followed all these steps, save/update your social_icons.php file, refresh your website and you should see the new icon displayed on your header or footer, depending where you are displaying your social icons.
