Try Amazon Prime Video for FREE for One Month. Click for details.

Add Social Media Icons to Divi

By Divi Dude

Please note: With tthe release of Divi 4, you can now easily add social media icons using the Theme Builder.  However, if you are still using prior versions of Divi, or still using the Divi’s basic header, then tutorial is for you.

Let’s face it, in today’s digitally driven world, social media is important. And right out of the box, Divi let’s you add some of the major ones, but not all. But never fear, adding additional ones is possible. There’s even a plugin, Divi Booster, that’ll help make the process an easy one. But don’t worry, if you’d rather spend the extra time than a few extra dollars on a plugin, then I will show you how to add the social media icons manually too.

As with most of my tutorials, there is a video on my YouTube Channel if you’d rather watch it. So without further ado, here’s the video (or you can scroll past it and read the instructions).

Using Divi Booster to Add Social Media Icons

This is what I like to call the “easy way.” Instructions for the hard (well, harder) way are down below. Divi Booster is a Divi plugin that just makes your life as a website developer easier. It adds about 50 functions to the already impressive Divi WordPress theme. It does cost a bit ($29), but it adds so many functions the cost is well worth it. You can purchase it here (not my site). Let’s get to the instructions.

(The following instructions are assuming you’ve already purchased Divi Booster, installed and activated it.)

Step 1: Under the Divi link on the left hand side, click on Divi Booster to bring up the settings page (can also do this from the plugin page).

Step 2: Click on “Site-wide Settings” and then “Icons”.

Step 3: Check the box for “Add more social media icons (enter URL)”.

Step 4: Add your social media website links in the appropriate boxes.

Step 5: If you want them to open in a new tab, check the “Open social media icon links in a new tab” box.

Step 6: Save changes.

That’s it. For instructions on how to do it manually, look below. Or watch the video above. (choices, choices, choices …)

Add Social Media Icons with Divi Booster

Adding Social Media Icons Manually

Step 1: Go to Theme Options and enable the icons you want (i.e. Facebook, Twitter, Google+) and enter in the correct URL in the provided fields. Save changes.

Step 2: Go to Theme Customizer > Header & Navigation > Header Elements and make sure the Show Social Icons box is checked. Save changes.

Step 3: To add other icons not listed (i.e. Pinterest, YouTube). Add the social_icons.php to your child theme. If you do not have a child theme, you will need one. See this page for more information.

Step 4: Go to Appearance. In the right hand corner, make sure under Select Theme to Edit that your Divi child theme is selected. Under Templates, click on social_icons.php.

Step 5: Copy the code that starts with  <? php if ( 'on' == et_get_option … and ends with<--?php endif; ?-->. It should be about 7 lines.

Add Social Media Icons to Divi

Step 6: Paste what you copied where you want the icon to go (i.e. in between Facebook and Twitter).

Step 7: Now change the icons to the ones you want. You will find a list of the social media icons fonts that comes with Divi here (scroll down to bottom). For instance, if you copied the Facebook icon in step 5 above, and you want to change it to YouTube, then replace the word Facebook with the word Youtube.(except in the line that starts with <a href=). We’ll do that in Step 8.

Step 8: Look for the line that starts with < a href= and in between the quotation marks you’ll want to enter your social media link. So it will look like this. <a href="" class="icon"></a>

Step 9: Click the Update File button.

Change Social Media Icons in Divi

Opening Icons In New Tab

Step 10:  In the following code <a href="" class="icon"></a> add target=”_blank” between the website and the class so it looks like this: <a href="" target="_blank" class="icon"></a>

Step 11: Click the Update File button.

That’s it. You should have now have social media icons on the top bar of your page.

Better Social Media

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Affordable Domain Registration

Get $1.00 off.

Popular Domains for just 99 Cents at Namecheap!

Legal Disclaimer

To support the publication of this website, this site runs banner ads and is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to As an Amazon Associate I earn from qualifying purchases. Also other ads may result in commission payments or other compensation.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business


Constant Contact

For Your Inner Nerd

Rolecosplay Movie Costumes

More From Divi Dude

Add Custom Pull-Quotes to Divi (aka Blockquotes)

Add Custom Pull-Quotes to Divi (aka Blockquotes)

Well, not all of you want the basic pull quote, so I decided to put my thinking cap back on and come up with some pull quote ideas for you all (or as my Southern friends are wont to say – y’all).

You may know pull-quotes as the newspaper term “Cut-Quote,” or as they’re called in WordPress’s Guttenberg “Blockquote” or the client term “Really Big Quote Thingy.” They’re all the same thing.

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

For the longest time I used MailChimp. I was drawn to the 2,000 free subscribers.

But when MailChimp changed how they defined subscribers and made some other not so user friendly changes, I started looking for alternatives. Not just for the free tier, but for my paid subscriber lists (I have clients that send out newsletters and they need more bang for the buck than what many free tier offers).

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This