MailerLite email marketing for small business

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

Instagram Training

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.

Big Discounts for Domains, Hosting, SSL and more

Legal Disclaimer

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.  Thank you for your support.

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.

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

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