Adding More Icons to the Social Media Follow Module

The Divi Theme's social media follow module allows you to add social media buttons into your web pages. It lets you choose from a limited range of icons… but what if you want one that isn't listed there? Here is a quick tip for adding the social media network icon of your choice to the module.

This is a draft tip, meaning that it hasn't been extensively tested and may not work perfectly.
It is not yet included in Divi Booster, but I hope to be able to do so in the future.

The way we'll do this is to simply re-style one of the existing social media icons to the social network of your choice.

Step 1: Add the icons you want, plus one you don't

Begin by setting up the module. First add any of the existing networks that you want to display, say Facebook and Twitter. Then add one that you don't (Dribbble in this example). In the one you don't, put in the URL you want the button to link to (e.g. your profile page on the network).

You should end up with something like this:

Step 2: Look up your network on the Socicon site

Socicon is an awesome font which defines icons for virtually all the major social networks. If you visit the Socicon icons page you'll find a big list of all the networks it supports. Search for your desired network (I'm going to use Houzz). Assuming your network is supported, you should find something like this:

Step 3: Change the icon color

You'll notice that the Dribbble icon is pink, while the Houzz icon shown in Socicon is green. Notice on the Socicon result that there is a HTML code "#7CC04B". This is the color code for that shade of green.

We can go back into the social media follow module and set the color of the Dribble icon to this HTML code like so:

The module will now look like this:

Step 4: Change the icon itself

Okay, now for the slightly tricky part. To change the icon, we need to load the socicon font into the page and use some CSS to change the Dribble icon to the Houzz icon (or whichever icons you choose to use / replace).

To do this, we need some code. For this, first add a new Divi "code" module to your page (right before the social media follow module would be ideal).

Then in the "content" field of the code module settings paste the following code:

The first part, beginning with "link…", loads the socicon font into the page.

The second part is some CSS code which tells Divi to display the icon using the socicon font, and gives the specific code for the Houzz icon (e040). You'll notice that this code was displayed in the Socicon site's result for the Houzz icon (as shown above). If you're using a different icon, then substitute this code for the one corresponding to your chosen icon. Note that Divi seems to require a double backslash (\\) at the start of this code, rather than a single backslash (\) as given by the Socicon site.

The third part simply changes the "tooltip" text that's shown when the user hovers over the icon. In this example I've changed it to "Houzz", but you can change it to anything you like (such as the name of your chosen network).

Note that the second and third part both reference "et-social-dribbble". This is Divi's CSS class name for the dribbble icon. If you are trying to modify some icon other than Dribbble, you'll need to change this to the class name for the icon you're changing. You can find this out by using the "Inspect Element" feature of your browser, or may just be able to guess – it's usually just the lowercase form of the social network's name.

Save the module, and here is the final result:

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Russell Smith

    Amazing, this worked!

    Hope you can integrate this into Divi Booster at some point, would be a great addition.

    Thanks for taking the time to figure this out and share with us Dan.

    – Russ

    Reply
    • dan

      You're welcome, Russ. I'll try my best to add it in to Divi Booster in the future 🙂

      Reply
    • Russell Smith

      Something else I noticed, if you want to add more that one 'new' icon, you'll have to use two different 'original' icons.

      I used Dribbble twice and (obviously, in hindsight!) the Dribbble code was applied to both of the new icons.

      Reply
      • dan

        Yes, I should have specified that. If you need to, it should be possible to modify the code above to affect just one instance of the Dribbble icon at a time. But if you have them free, using two different 'original' icons will work just as well.

        Reply
  2. Jeanne

    Thank you for this! It worked perfectly when I changed the socicon code:

    From: '\\e040' !important;

    To: "\e040" !important;

    This matches how the icon codes are defined in the main stylesheet.

    Reply
    • dan

      Thanks Jeanne! For some reason the Divi code modules on my site are converting double slashes into single slashes (and getting rid of the single slashes altogether), which is why I wrote it that way. But it doesn't seem to be happening for anyone else so I've updated the post to use single slashes. This is indeed the correct form for the codes, so I'm glad you figured it out and that your code modules are behaving themselves 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *