How to add custom Icons to Divi’s social media module

Post By : Jim Monkhouse
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you're in the right place. Let's learn how to How to add custom Icons to Divi’s social media module

Let’s learn how to get our Divi social media module set up

I personally ran into the issue, (as I’m sure many people have) when a client requested a specific social network in her footer. After scouring a few posts and running into tutorials which were encouraging me to install the font awesome library, I thought there has to be a better way. 

I think I found it and in this post I’m going to open your eyes to the endless customisation possibilities for customising the icons on Divis social sharemodule  you could even make your own custom icon and use it to replace the default social media icons if you need.

The great news about this tutorial is that it takes very little coding skill and as I always advocate, it will allow you to sidestep the use of a plugin, which we all know can unnecessarily add extra bloat, maintenance and security vulnerabilities to your website. 

On top of this it allows you true creative freedom over the Divi Social Media Plugin so that you can ensure that your social Media icons are on brand and on point.

Without further ado, let me take you through how to add custom Divi Social Media icons

Step one plan your custom Divi social media module

There’s two main scenarios that I can think of that you would be using this approach to customise your Divi Social Media Icons. The first is that the Social network you want is not available in the Divi Default Social Media Icons library, leaving you no option but to track down the social media icon. The second is that you would like to add a completely custom version of one of the existing social media icons, to better suite the design of your Divi website. 

So your first step is to locate or create some custom social media icons. I did a quick bit of googling for this example and found some free social media icons resources.

How-to-add-custom-Icons-to-Divi’s-social-media-module-triangle_social_Media

I won’t go deep into the formatting of the icons, but make sure you crop each social media image to the same dimensions. This will make it easier when positioning the social media icons using CSS.

Step Two – Setup the Divi Social Media Module

Now it’s time to set up our Divi Builder Setup. So create a column > Row > and insert the Divi Social Media Widget to the row.

Next add your chosen amount of social networks, for this example we will be using three, make sure that you have “Select Network” Chosen in the drop down

How-to-add-custom-Icons-to-Divi’s-social-media-module-Setup

Under the advanced tab add a custom class called “Custom-social” or whatever you would like to call it.

How-to-add-custom-Icons-to-Divi’s-social-media-module-css-class

That’s it we’re now set up to add the CSS and apply the custom icons.

Step Three – Add the custom CSS to style the Divi Social Media Module

Now it’s time to transform your social media bar and make it fully custom. I’ve created a block of code designed to make it as easy as possible to format your social media module. Which I’ll talk through in the attached youtube video.  Simply copy and paste the code block into the advanced CSS for the page. You can also add that custom CSS level in wordpress or directly in your child theme stylesheet.

 

.custom_icons li {
position: relative;
top:9px;
border: 1px solid;
background: yellow;
margin-left: 10px;
}

.custom_icons li:nth-child(1) {
margin-left: 0px;
}

.custom_icons li .icon:before {
content: "";
background-position: center center;
}

.et_pb_social_media_follow li a.icon:before {
height: 50px;
width: 50px;
}

.et_pb_social_media_follow_network_0, .et_pb_social_media_follow_network_1, .et_pb_social_media_follow_network_2 {
height: 50px;
width: 50px;
}

.custom_icons li:nth-child(1) .icon:before {
background: url(https://diviwebsiteexpert.com/wp-content/uploads/2021/07/FB_grunge_icons.png) no-repeat;
background-size: 50px 50px;
}

.custom_icons li:nth-child(2) .icon:before {
background: url(https://diviwebsiteexpert.com/wp-content/uploads/2021/07/YT_grunge_icons.png) no-repeat;
background-size: 50px 50px;
}

.custom_icons li:nth-child(3) .icon:before {
background: url(https://diviwebsiteexpert.com/wp-content/uploads/2021/07/Twitter_grunge_icons.png) no-repeat;
background-size: 50px 50px;
}

 

And that’s it, you’re no longer drab and default, your custom! Give yourself a pat on the back and enjoy looking at those social media icons in action!

Whilst you’re here can I ask a quick favour?

If this post helped, I’d much appreciate a quick tap on the like button on my accompanying Youtube video , as a small thank you, it’ll cost you nothing and really helps me get out to more people.

I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!

Whilst you’re here can I ask a quick favour?

If you found this this post helped in any way , feel free to tap the like button on my accompanying youtube video. it’ll cost you nothing and really helps me get these tutorials out to more people like you.

I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.

0 Comments

Submit a Comment

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