In this tutorial, I will show you how to add custom icons to Divi’s social media module. Now if you are reading this, then perhaps you ran into a similar situation as I did. A former client asked me to update his site by adding another social media icon. But to my surprise, Divi did not include the icon my client requested (Houzz) and had to manually find and style the icon accordingly. Now that’s all fine and dandy, but that would mean I would have to repeat the same task if another client requested an icon that Divi did not ship with (not to efficient). So I sat back and gave it some thought and came up with the following solution.

First lets have a look at Divi’s default icons.

Now take a look at a few custom icons I created using the same module.

So without further ado, insert your social media module and “Add New Social Network”. Now leave the “Social Network” select box at its default.

How to Add Custom Icons to Divi Social Media Module

In the “Design” settings, choose the icon’s background color.

And lastly, add the class below.

Custom Divi Social Media Network Settings

custom_icons

Now head over to your style sheet and add the block of code that matches the icon you want to use (e.g., Snapchat icon is block number 2). If the icon your looking for isn’t listed, simply create your own and upload the image to your media library. Copy & paste the image URL into the CSS background URL.

Below is the CSS code snippet for all 14 custom icons.


/* ===== Houzz Icon  1 ===== */
.custom_icons li:nth-child(1) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/houzz_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Snapchat Icon 2 ===== */
.custom_icons li:nth-child(2) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/snap_chat_Icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Yelp Icon 3 ===== */
.custom_icons li:nth-child(3) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/yelp_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Behance Icon 4 ===== */
.custom_icons li:nth-child(4) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/behance_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Paypal Icon 5 ===== */
.custom_icons li:nth-child(5) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/paypal_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Yahoo Icon 6 ===== */
.custom_icons li:nth-child(6) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/yahoo_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Blogger Icon 7 ===== */
.custom_icons li:nth-child(7) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/blogger_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Kickstarter Icon 8 ===== */
.custom_icons li:nth-child(8) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/kickstarter_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Amazon Icon 9 ===== */
.custom_icons li:nth-child(9) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/amazon_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Ebay Icon 10 ===== */
.custom_icons li:nth-child(10) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/ebay_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Quora Icon 11 ===== */
.custom_icons li:nth-child(11) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/quora_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Vine Icon 12 ===== */
.custom_icons li:nth-child(12) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/vine_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== ShazamIcon 13 ===== */
.custom_icons li:nth-child(13) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/shazam_icon.png) no-repeat;
background-size: 30px 30px;
}
/* ===== Spotify Icon 14 ===== */
.custom_icons li:nth-child(14) .icon:before {
content: "";
background-position: center center;
background: url(https://dividezigns.com/wp-content/uploads/2017/07/spotify_icon.png) no-repeat;
background-size: 30px 30px;
}

If you analyze the code above, you’ll quickly see a pattern. Each block of code represents an icon. Just be sure to change the “nth-child()” pseudo class number to correspond with the order.
Notice the last block of code has a background image icon called “spotify_icon.png” which is also the last icon.

And that about wraps it folks. Below you can download the AI file of icons or a full Divi layout to add to your Divi Library.

Till the next time Divi Dezigners! 😁

AI Icon File

Divi Import Json