How to Add More Social Media Icons to Divi

Posted on June 18, 2016 by in Divi Resources | 120 comments

How to Add More Social Media Icons to Divi

Welcome to Day 19 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

From content modules and advanced design settings, to pre-made layouts and powerful customization options with live previews, Divi is an incredibly versatile theme. You can design your site to look as unique as you want when you’re using Divi, right down to the nitty gritty details – including your social sharing and following icons.

In fact, there’s no need to install any of the other popular social plugins gracing the thousands of other WordPress sites. Divi has you covered; especially if you don’t mind getting your hands a little dirty with some simple code.

Below, you’ll discover how you can enable extra social media icons in Divi’s theme options, how to use the Divi Builder to insert social media icons anywhere on a page or post, and lastly, how to add more social icons to Divi using a little PHP.

Let’s dive right into it!

How to Easily Enable Extra Social Media Icons in Divi’s Footer

The simplest way to add more social media icons to your Divi site involves accessing the Theme Options panel, enabling the options for Facebook, Twitter, Google+, and RSS, then entering your profile URLs into the fields. When you do this, you’ll see them show up as icon links in the footer of your site:

Divi footer social buttons

In your WordPress dashboard menu, hover your cursor over the Divi option, then click on Theme Options. Scroll down just past the AWeber Authorization field to the social icon icons.

You’ll see several buttons that are enabled or disabled already. The last four buttons can be used to enable the Facebook, Twitter, Google+, or RSS icons in your site’s footer. You have the flexibility to enable just one, two, three, or all four of them:

Divi social media theme options.

If you decide to enable these social media icons, remember to scroll down and put your profile URLs in the appropriate fields. If you forget this step, the icons will show up in your footer, but links won’t open if clicked:

Divi social media link theme options.

Scroll all the way down to the end of your theme options and click Save. Now you can check out your site’s footer and click on the social icons to test them out!

How to Use the Divi Builder to Add Social Media Follow Modules in Page or Post Content

Sometimes, putting extra social media icons between blocks of text, images, or other content in the body of pages or posts can make a lot of sense. Your About Us page, for example, would be a good page for adding extra social icons to help inform visitors about how to connect with you, and they’ll certainly stand out more than simply linking to your social profiles using regular text.

The amazing Divi Builder tool makes it easy for you to insert social media icons into your pages or posts. It enables you to build your page or post using over 40 drag-and-drop modules – one of which is the Social Media Follow module.

Any time you create or open up an existing page or post in your WordPress dashboard while using Divi, you’ll see a large purple button beneath the title field labeled Use The Divi Builder:

Use the Divi Builder button

If you have any existing content in the default WordPress editor, you’ll have to transfer it to the Divi Builder to keep using it. However, if you’re creating a new page or post for the first time, you can simply click Use The Divi Builder to start building your page or post from scratch.

You can use the tool to design your page or post however you like using rows, columns, and any of the 40 available modules. If this is your first time using the Divi Builder, you may want to check out this overview first to get a clear understanding of how it works.

When you’re ready to add social media icons to your page, click on Insert Module(s) in the section you’d like your social media icons to show up:

Divi Builder Insert Modules

A list of module options will display; you can scroll down toward the bottom to select the Social Media Follow module:

Divi social media follow module.

You’ll be asked to choose the social networks you want before you can start customizing them, so click Add New Social Network to select one from the drop-down list, add your profile URL, and optionally, select a specific color for its icon:

Divi add new social network

Divi select a network

Once you’ve added your first social network, you can continue to add further networks by following the same instructions. They’ll all be listed under your General Settings, which you can edit, copy, or rearrange by dragging them around and dropping them in place:

Divi social Facebook Twitter LinkedIn

Once you’ve added your social networks, continue onto the General Settings tab to play around with some further customization options. You can change the link shape, text color, the way the page opens, and the option to include a Follow button for all of your icons:

Divi social icon customization

When you’re all done, click Save & Add To Library, or Save & Exit. You can then save and preview your page or post to see how your new social following icons look on your site.

Adding More Social Media Icons to Divi

So, now we know how to use the default Divi settings to add social media icons to our footer, and how to use the Social Media Follow module to place them anywhere else on our pages. However, what if you wish to mix things up and include some options not available in the Divi Theme Options panel to your footer? If you’ve explored the Social Media Follow module, you’ll be aware that Divi ships with 15 social media icons, and with a little bit of code, you can include any of these into your footer.

Divi’s style.css file, located in its top level folder, shows us exactly how many social media icon possibilities the theme includes by default:

.et-social-facebook a.icon:before { content: '\e093'; }
.et-social-twitter a.icon:before { content: '\e094'; }
.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-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'; }
.et-social-rss a.icon:before { content: '\e09e'; }

The Divi Theme Options panel only includes options for Facebook, Twitter, Google+, and RSS in order not to clutter things up. However, depending on the focus of your site, you might use an entirely different set of social media platforms. Your content strategy may focus around videos, in which case you’d naturally want to include a link to your YouTube channel in your site’s footer, for example. There’s even a Myspace icon thrown into the mix.

In order to make this happen, all you need to do is head over to your Divi theme’s folder and into the includes folder, where you’ll find a file named social_icons.php. Open it up, and you’ll be greeted by an unordered list class named et-social-icons. Within, you’ll find the code for the four existing social media icons. The code for each looks like this:

<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
    <li class="et-social-icon et-social-facebook">
        <a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
            <span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
<?php endif; ?>

In order to include a new social media icon into this group, we need to create a new item within this list. The code looks like this:

<li class="et-social-icon et-social-myspace">
<a href="‎" class="icon">
<span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>

There are three key elements that need to be set properly in order for this code to work. The first is the et-social-icon et-social-myspace class, where we replace myspace with one of the social media icons from the full list found above. Secondly, we replace the…

<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">

…section included in the Facebook example shown earlier. This line of code is used to fetch a URL typed in its corresponding section on the Divi Theme Options panel. In our case we’ll simply type the URL into the code overselves, since there isn’t a section in the panel for additional social media platforms. Finally, we state the name of the social media platform we’re adding within the span tags…

<span><?php esc_html_e('MySpace','Divi');?></span>

…and save the changes to social_icons.php. If you check out your website now, your brand new Myspace icon will greet you from your footer:

Divi's footer modified to add a MySpace icon.


When you have Divi’s default footer options, the Divi Builder tool, and a little easily implemented code, there’s no reason you’ll need to install a plugin to add social media icons to your Divi-powered website. Divi gives you full control over how your social icons look and where they show up. To recap:

  1. Access the Theme Options panel to enable any default social media icons on your site.
  2. Use the Divi Builder to add the Social Media Follow module to your posts or pages.
  3. Delve into your Divi PHP files to add further social media icons to your website.

Do you see benefits by having a multitude of social media options available on your site? Let us know by subscribing and becoming part of the conversation via the comments section below!

Article thumbnail image by VKA /


Divi 100 Day 19

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0

Premade Layouts

Check Out These Related Posts


    • Hi Nathan, I post my question here to a better chance to have an answer… Is there a chance that the full wide blog template will be ameliorate in Divi 3.0 ? Because this is clearly “The weak point” of this awesome theme… I mean i would like to have the title at the top of the picture for a more classic and understable layout… like here in the Eleganth Theme’s Blog…
      P.S : Sorry for my poor english, I’m french 😉

  1. Thanks! Would love to see this integrated though (saves time, is cleaner)


      • This is a pretty obvious one. All that PHP stuff is more technically difficult for a lot of folk. Just add some fields. Instagram is pretty big from what I hear.

        • Amen. Add some of these other social platforms to the built-in icons.

          • Agreed on this. This has always been an obvious miss with Divi that was somewhat addressed with Extra. Social media is a massive part of any online presence these days, and even the extended list of 15 here is limited. What about platforms like Medium and Steller and 500px where there are millions of users (no exaggeration) each day? And MySpace is included on this one?

      • Did anyone add this already on the forum? I didn’t see it. It needs a like or an upvote or something.

  2. Hey guys, great job. Will there be an update to the new Instagram logo?

    • Was wondering that too. I think the G+ one is out of date as well.

    • +1 for this!

    • No problem, Mark!

  3. Thanks for the great post! Can you also explain how to add Social Share icons – so visitors can share your content on their social media? Many thanks!

    • You can use the Monarch plugin for this. Its available as part of your elegant themes subscription.

      • Matthew – Thank you! I didn’t realize I could do that! Again, thank you!

      • Thanks for chipping in, Matthew!

  4. Could you add telegram and snapchat?

  5. Not sure why a YouTube icon/link isn’t offered by default from within the DIVI dashboard.

  6. Thanks for the great post! Could you add Xing?

  7. I find this post mildly offensive?

    The title says “Add More Social Media Icons to Divi” but we have not learned how to add more icons to the Divi Social Module, which is what Divi is about isn’t it, modules?

    Plus, the subtitle “How to Easily Enable Extra Social Media Icons in Divi’s Footer” is not specific to Divi. Every ET theme has the same option.

    • Hello sarumbear,

      The focus of the post was simply to show how to add more social media icons to Divi – as you’ve pointed out, this is separate to the appropriate modules. Also, you’re right – every theme has the option to add extra icons within the footer, but this is 100 Days of Divi, which is (of course) specifically focused on all things Divi. 🙂

      Thanks for your comment!

      • Here’s why I am miffed. You say the post is “specifically focuses on Divi” but it is not. All themes have the same function. What is different in Divi to other themes is the existence of modules and you omitted the social module.

  8. The best way to do this is to extend the array that stores the options. Ive done this on my own website and use it in child themes all the time so my clients have control over this as part of a child theme.

    Take a look at this gist –

    If you guys are interested in a video tutorial I can make one at some point this week. Just let me know if your interested.

    • Thanks Matthew…I’d be interested for sure!
      What’s your website so I (we) could take a look?

    • I would like a tutorial on this! My client recently wanted to add a Periscope icon but Divi doesn’t have that option anywhere, and as stated above, the instagram icon is now out of date so I’d love to be able to replace it.

      • Brian King. Best. Logo. Ever.

    • A tutorial would be great and much appreciated, Matthew. There are a handful of social icons I need to add that aren’t available in the 15 icons list here.

  9. We really need SoundCloud, while has millions of users. Hard to believe MySpace would be included but not an app like SoundCloud.

  10. I would love to see a general instruction how to add social network icons

    there are more than just the 4 or 5 which you include…

    best would be to give a general instruction and the mostbest option would be to tell me how to add RAVELRY to the social media ;=)

    • Oh this is a good one!!! I know of MANY that use Raverly that are on Divi.

  11. This is not going to survive theme updates though, is it?

    • When using a child theme like the video shows it will.

  12. Anywhere on the page? That’s great!
    How would I add social icons to the nav-menu? Ket’s say right next to the logo.

    • That might be something we focus on in another article, Steven!

  13. I initially used the social icons at the top as post the beginning of the post but have since opted to used the square version from the divi builder because it allows for a number of different icons. Love it.

    • Great stuff, Tahir. 🙂

  14. We need to have icon. Is there a way?


  15. DIVI has so many features. Thanks for this tutorial on how to best utilize the social icons. You mention not wanting to ‘clutter up’ the theme optimizer, but I would think the addition of some very common ones used today would include YouTube, Pinterest, LinkedIn, Instagram, Tumblr. Having to go into the theme files and custom code seems contradictory to the ease of use that DIVI is known for. Any chance the awesome team at DIVI would consider adding these?

    • Agreed. Why not clean it up by hiding the URL area unless the network is Enabled.

    • Absolutely agree! It suppose to be easy – I don´t think the above description is that when it comes to add the ones I want. Sorry.

  16. Thanks for this. I already had the social media icons set up in my footer bar, but now I have the icons with the Follow next to them on several other pages right below the text. I think this will really help in gaining follows / likes.

    I appreciate the help.

    • Great stuff, Martin! Glad it’s working out for you. 🙂

  17. To “not clutter up” is a pretty lame excuse for not having more social icons.

    It is cluttered because you have a button to enable AND a field for the link. Why the button? Just check if the url field for the network is empty. Show the icon of there is a link and don’t show it if it’s empty. That also removes the problem that “the icons will show up, but links won’t open if clicked”. Divi already does it that way in the person module.

    And an even better way to not clutter things up is to apply the same concept of the social follow module to the Divi settings. That way you only need a button to add a social network and when clicked to select the network and enter the url. That’s also how competitor Avada does it.

    Currently, Divi is cluttered when it comes to adding social follow icons because there are 4 different ways to add them:
    1) Divi options: just 4 networks with a button for each to enable/disable + a field for the url.
    2) Person module: just 4 networks and only a field for the url.
    3) Social follow module: a single button to add a network and when you do that a drop down to select the network + a field to enter the url.
    4) Ok, not Divi, but the Monarch plugin uses yet another way. Almost like #3 but still different.

    It looks like 4 different programmers needed to do something with social follow icons and then each one invented the wheel all over again. Please make this more user friendly in Divi 3 by using the method of #3 for all places that need social follow icons. While at it, please also include a ‘custom’ option for which you can select your own icon (like you can for the blurb icon) + title + url.

    • Yeah….what he said!
      C’mon ET!

    • John-Pierre, you should mention this in our Theme Suggestions forum – There’s plenty of you that would like to see changes, and posting there is a great way to make your voice heard!

    • And a “new tab? or just fill the one you’re on?” option would be a great idea.
      People get lost on facebook and such, so if they close a tab it would be nice to see my site still being there.

  18. I didn’t notice where you said you should only do this in a child theme or it will be overwritten on theme update? Which, will only lead you to frustration when you have to do it all over again.

    • Hi Rebekah, you’re absolutely right and I mentioned that in the video.

  19. FYI – You have a typo in one of your code snippets. Look for line item class=”et-social-icon et-social-myspace” need opening <a tag.

    Nice tutorial, thank you.

    • Thanks for the heads up, Jules!

  20. It’s nice, but i didn’t find Xing in the list.

  21. Thanks Tom, great article not many people know how easy it is to add social media icons to their header and footer via a child theme.

    A lot of Divi users are however not as comfortable with code as others, so a more integrated solution is often better. Also there are some Social Media icons that Divi doesn’t support out of the box. That’s why I wrote the Social Media additions plugin, as it allows a user to add additional social media icons right from the Divi Theme Options page.

    • I like the free Social Media Widget plugin as it allows for custom services. That is certainly not addressed in this article or in your plugin.

      • Richard, you are correct my plugin does not allow for custom services, however if you purchase I do take requests. In fact the Houzz icon was added from a customer request.

        To make it possible to add custom icons would increase the complexity of the plugin and I’d rather keep it simpler and therefore cheaper.

        • Well Johnathan MY simple idea for custom services was to have a separate very simple module created for that area.

          Click to enable custom services and then go directly to adding in custom service modules.

          One option for title, One option icon URL, one option for URL link for the icon.

          The ability to arrange them in any order you want and the ability to enable and disable them.

          You just do not need anything more imo.

          The plugin you have is very simple, BUTT throw in 50 different services and it gets messy in a hurry.

  22. Would it be at all possible to make or your own “Social Icon” and Add it?

      • While that sounds good and dandy, the reality is with 374+ Pages in the Theme Suggestion section, it just gets dissolved in there.

  23. I agree that it would be good to see his integrated as part of Divi

  24. Do I understand right that your solution to add another social network will only work if you activated facebook?
    <?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' )

    what IF I want to add my Ravelry Social Network but NO other?
    I am in no other network

    the best would be to enable to add the necessary data (name of network, URL to your profile or page there) into some dialogue fields, to upload the logo by some upload button and that's all

    that is better than depending on a pre-filtered list which is set together because of some personal likes etc. of the Divi-people…

    it seems to me that there are a lot of non-american networks in the world, like vkontakte f.e., but you are too US-centered….

    Just my next 5 cents…

  25. Thank you!!
    is it possible to make or your own “Social Icon” and Add it?

  26. Is it just me, or does this post highlight a couple of glaring weaknesses with Divi? I agree with one comment that it seems different Divi developers created different approaches to the Social Follow. But what puzzles me is that, with the incredible importance of social media linking, and the enormous list of social media outlets, why is the entire Divi approach so clunky? This is fundamentally important and it ought to be a simple, intuitive process to manage social icons, including, the ability to simply add new social icons for services you haven’t thought of today! That is my humble opinion.

    • Agreed! And, replace out-of-date icons such as using the new Instagram icon.

    • Manu, it appears your message was incomplete. However, head on over to our forums ( where other users may have run into the same issue and can offer a solution.

  27. Hi there. Think this should be included in the Theme Customizer in Divi 3.0! It is a weak point and to make life easier. We shouldn’t have to add custom code for the major social networks – they are needed by most sites after all! – Facebook, Twitter, LI, Google+, Instagram and Pinterest.

    Also I think we should be able to remove the ‘Powered by WordPress/Elegant Themes’ link in footer more easily as I don’t want that on my website and nor would any clients!

    • I agree completely – I would only ad YouTube to your list – these are the major sites – and they already have the coding prepared – integrating these would be very awesome.

  28. I think this features must be included in the Theme Options settings..

  29. Thanks you so much for this details tutorial. Divi Builder tool makes it easy to add my social media icons on about and contact page.

    • Thanks for your kind words. 🙂

  30. hi,

    Thanks for the great post! Can you also explain how to add Social Share icons – so visitors can share your content on their social media? Many thanks!

  31. I’d love to see this integrated as well so we can choose the ones we want from the main networks.

    If you’ve got the icons in the code somewhere already, give us the ability to turn them on or off easily instead of merely giving us FB, TW, G+ and RSS.


  32. I think it wouldn’t hurt to have all the major social plataforms native on divi theme options.

  33. When I paste the cod on Divi theme it works just fine. If I add to my child theme it doesn’t work. Anyone facing the same problem?

    • We’ve not heard of this happening – it’s wise to double-check the code, especially if you’re copying and pasting. Other than than, try posting your issue in our forums – Other users could have had the issue in the past, and may be able to offer a solution. Good luck. 🙂

    • Andre,
      Are you keeping the file structure the same? Your child theme will need to have an includes folder and then put your social_icons.php file in it.

  34. Great post – but I saw the sentence – “we only show TW, Fbk, & G+ to keep things uncluttered” – this makes it hard for those who don’t code. All the ones you already have in the divi system are GREAT! – I so wish that you could just have an easier way to access the ones you alrady have coded options for – at LEAST LinkedIn, Pinterest, Instagram & Youtube. I will go to the suggestions page. – this is one of my #1 request from clients – and I appreciate the how to info here, I soooo with this were easier. Thanks!

    • Thanks for your comment, Cat!

    • Thanks, George!

  35. This is awesome but couldn’t we just put this as a tab in the DIVI options.

    • You could mention this in our Theme Suggestions forum as other users have – All suggestions are read, and you could end up seeing it implemented in a future update. 🙂

  36. Hello,

    I would like to add Tripadvisor icon…how can I do it if I want the same design result?

    Thank you for your help

    • Hi Mehdi,

      I used to create two of the right size and colour, one for the hover state. I think I went 34px*34px for both and then cropped down in photoshop to 24px high.

      Once you’ve uploaded the icons to the server you can add the following code to the social_icons.php file in the includes folder of your child theme… make sure you add it inside the tags.

      Then you need to add the following to style.css in your child theme…

      .et-social-tripadvisor a {
      background: rgba(0, 0, 0, 0) url(“/tripadvisor-34×24-light.png”) no-repeat scroll 0 0 / 100% auto;
      display: block;
      margin-left: 10px;
      .et-social-tripadvisor a:hover img {
      opacity: 0;
      .et-social-tripadvisor a:hover {
      background: rgba(0, 0, 0, 0) url(“/tripadvisor-34×24-dark.png”) no-repeat scroll 0 0 / 100% auto;
      display: block;
      .et-social-tripadvisor a.icon::before {
      content: url(“/tripadvisor-34×24-light.png”);

      I don’t think all of this css code is necessary, possibly the first bit can be left out.


  37. Hi Nathan

    Thank you so much for your post. I just have 2 quick questions:

    1. Where can I get a child theme that will grant me all the functionality of Divi. I have made a simple child theme that worked, but did’t allow all the functionality of Divi.

    2. Why doesn’t Divi come shipped with all the different social media icons? Will 3.0 have them all out of the box?

    Thanks for your reply.

  38. So I followed the instructions for the third method of adding social icons – by adding the code above (modified for instagram) into the social_icons.php file. This is what I added to the list:

    And big disappointment – no Instagram icon appears in my footer. Is there some extra step I’ve missed here? Any help would be appreciated. Here’s the entire modified social_icons.php file I uploaded:

    <a href="” class=”icon”>

    <a href="” class=”icon”>

    <a href="” class=”icon”>

    <a href="” class=”icon”>

    • Paul, it appears you’re missing the code from your comment!

    • Chris, the first thing to do is double and triple-check all of the code you’ve entered to make sure there’s no mistakes – it only takes one to spoil the party. 🙂

      If you’ve had no joy, drop us a line here – It appears to be working for the majority of users, so there may be a deeper issue at work.

  39. Ok… But do we have the ability to add these new icons as quickly as we can with FB, TW, RSS etc.? For a client that has zero coding knowlege, they find it baffling that I need to add their icons for them… Still.

    • It’s not as quick, but still effective! If it’s something you’d love to see in a future version of Divi, you can always let us know in our Theme Suggestions forum –

  40. Is there a way to do it without using a child theme? Thanks for any help!

    • Pedro, you should always use a child theme so that your customizations aren’t affected whenever your update Divi.

  41. What if someone wish to customise them, customising icons according to my site design?

  42. Hello,

    I almost got crazy trying to add the Flickr Social Icon 🙂

    That’s because you made a mistake with the spelling: flikr instead of flickr.

    Check the css line, i copied it from the example above:

    .et-social-flikr a.icon:before { content: ‘\e0a6’; }

    Hope that can help other users!

    • Thanks for the heads-up, Sergio!

  43. Hey Tom, my footer code looks a bit different – perhaps due to updates. Maybe you can help me implement an additional icon (Youtube)? I have Facebook and Google+ enabled, and would like to add Youtube after them. Please email me at the address I’ve listed when you have a moment.

  44. There should be an easy way (without altering code) to place sharing icons over images or other sections. I use your monarch plugin and checked media, and it does nada.

    • Aimee, you should mention that as a suggestion in our user forums –

      There have been plenty of additions to Divi based on user suggestions, and it’s a great way to let us know directly. 🙂

  45. Hi there

    When I navigate through the Divi file, to ‘includes’, there is no social media icons folder. All I have listed is:

    – functions (folder)
    – navigation.php
    – no-results.php
    – subscription (folder)
    – widgets (folder)
    – widgets.php

    I want to add Instagram to my footer (which I can’t believe in 2016 is not standard in the theme BTW) but getting stuck on this first bit..

    • There is no ‘social media icons’ folder. You are looking for the ‘social_icons.php’ file in the ‘includes’ folder. Rather than changing the file in the Divi theme, you should create a Divi-child theme. Then create an includes folder, copy the social_icons.php file into this folder, and edit the file there.

  46. I added the YouTube icon, but the icon looks much smaller than the Facebook, Twitter and G+. Is there something I’m missing? Thank you!

Join To Download Today

Pin It on Pinterest