Adding More Icons to the Social Media Follow Module

This post may contain referral links which may earn a commission for this site

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.

Adding New Social Media Follow Icons using Divi Booster

Divi Booster adds almost 300 new social media icons to the built-in Divi Social Media Follow module. With Divi Booster installed, these new icons are immediately available for use. They can be found alongside the existing 14 social networks supported by Divi, at:

Social Media Follow Settings > Add New Social Network > Content Tab > Network > Social Network

The additional social media network icons are available from Divi Booster 3.0.6 onwards.

Divi Booster adds the following icons to the Social Media Follow module:
500px
8tracks
Adobe Portfolio
Airbnb
Alibaba
Aliexpress
Alliance
Amazon
Amplement
Android
AngelList
Angie's List
App Store
Apple
ArtStation
Ask
Augment
Avvo
Baidu
Bale
Bandcamp
Battle.net
Beatport
beBee
Bebo
Behance
Bing
Bitbucket
BlackBerry
Blizzard
Blogger
Bloglovin'
Bonanza
BookBub
Booking
Buffer
Calendly
CD Baby
Chrome
Codepen
CodeRED
Coderwall
Collectorz
Craigslist
Crunchbase
Curse
Dailymotion
Debian
Deezer
Delicious
DeviantArt
Diablo
Digg
Discord
Disqus
DLive
Doodle
Douban
Draugiem.lv
Drupal
eBay
Eitaa
Elementary OS
Ello
Endomondo
Envato
Etsy
Facebook Messenger
FeedBurner
FilmFreeway
Filmweb
Firefox
Fiverr
Flattr
Flipboard
Formulr
Forrst
Foursquare
Freelancer
FriendFeed
Fundable
Fyuse
Game Jolt
GameFor
GameWisp
Ghost
GitHub
GitLab
Gitter
GNOME
Goodreads
Google
Google Calendar
Google Groups
Google Hangouts
Google Maps
Google Photos
Google Play
Google Play Music
Google Scholar
GoToMeeting
Guru
Gust
Hacker News
HackerOne
HackerRank
Hearthstone
Hellocoton
Heroes of the Storm
HomeAdvisor
Homes
homify
Horde
houzz
ICQ
Identica
IMDb
Indie DB
Instructables
Internet
InVision
Issuu
iStock
itch.io
iTunes
Jamendo
Keybase
Kobo
Lanyrd
Last.fm
Letterboxd
LINE
LiveJournal
Livemaster
LogMeIn
Loomly
Lyft
macOS
Mail
Mail.ru
Mastodon
Medium
Meetup
Metapop
Microsoft
Mix
Mixcloud
Mixer
Mobcrush
Mod DB
Model Mayhem
Mozilla Persona
Mumble
MyAnimeList
Napster
Natgeo
Naver
NewsVine
Nextdoor
Niconico
Nintendo Network
npm
Odnoklassniki
OpenAI Gym
OpenID
Opera
Origin
Outlook
Overwatch
Pandora
Patreon
Paypal
Periscope
Pixiv
Player.me
PlayStation
Pocket
Qobuz
QQ
Quora
RaidCall
Ravelry
Realtor
Redbubble
Reddit
Redfin
Remote
Renren
ResearchGate
Resident Advisor
ReverbNation
Seedrs
SeenThis
SharePoint
ShareThis
Shopify
Sina Weibo
Sketchfab
Slack
SlideShare
Smashcast
Smashwords
SmugMug
Snapchat
Society6
Songkick
Soroush
SoundCloud
SPIP
Splice
Spotify
Spreadshirt
Squarespace
Stack Exchange
Stack Overflow
Stage 32
Starcraft
StayFriends
Steam
Stitcher
Storehouse
Strava
StreamJar
Swarm
TeamSpeak
TeamViewer
Technorati
Telegram
Threema
Tidal
TikTok
Tinder
ToneDen
Toptal
Torial
Traxsource
Trello
TripAdvisor
Tripit
triplej
Trulia
TuneIn
Twitch
Uber
Ubuntu
Udemy
Unsplash
Upwork
Ventrilo
Viadeo
Viber
ViewBug
Vine
VKontakte
VSCO
Warcraft
WeChat
WhatsApp
Wickr
Wikipedia
Windguru
Windows
Wix
WordPress
Wykop
Xbox
Xing
Yahoo!
Yammer
Yandex
Yelp
Younow
Youtube Gaming
Zapier
Zazzle
Zerply
Zillow
Zomato
Zoom
Zynga

Adding a new Social Media Follow Icon Manually

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 around 300 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 in some cases, rather than a single backslash (\) as given by the Socicon site – so try both and see which works for you.

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

23 Comments

  1. This used to work great. But for some reason this code won't load the socicon font anymore. It shows rectangle icons now instead of the icons I replaced. Anyone got a solution?

    Reply
    • Hi Robin, it looks like the server hosting the socicon font is returning 403 (Access Denied) errors. I'm not sure if this is a temporary thing or something permanent. I'll try and take more of a look at this soon and see if I can figure out what's going on. It looks like it's still possible to download the socicon fonts (https://www.socicon.com/download), so one solution is to host the fonts on your own site and load them from there…

      Reply
  2. Thank you!

    Reply
  3. Whoohooo!! Thanks for this!

    Reply
    • Ha ha, you're welcome, Mike!

      Reply
  4. Where I have to insert the code? At Main Element?

    Reply
    • Hi Mario, go into the settings for your code module, then on the "Content" tab you should find a "Code" box (under the "Text" subheading). Place the code in there and it should work. I hope that makes sense, but let me know if not.

      Reply
  5. Thanks Dan, worked a treat. I really should buy you a coffee one of these days.

    Reply
    • Ha ha, sure. Maybe not today though – I've had too much already 😉

      Reply
  6. Hey, thanks very much for the tutorial. As I'm already using FontAwesome on my site, I used that instead to turn the MySpace (I wonder who still uses that…!) to GitHub. You can see the result on https://noellesteegs.com/project/buzzbrand/ (work in progress).

    Reply
    • Hey Noëlle, nice work – the footer looks great. Yeah, I'm not quite sure who uses MySpace these days… 😉

      Reply
  7. Has this been added to DiviBooster yet?

    Reply
    • Hey Joe, I haven't been able to tackle it yet, but hopefully I'll be able to get to it soon. I'll update here when I do. If you can let me know which icons you'd like to see in there I'll add them to my list and make sure they are included. Thanks!

      Reply
      • Hey Joe, I've just released Divi Booster 3.0.6 which adds the 300 or so icons from the socicon font set into the social media follow module, alongside the built-in Divi ones. These are the same icons Divi Booster already makes available in the header / footer. Hope it helps!

        Reply
    • Hey Dave, don't change that link – it's the stylesheet for all the icons, so you always want to load it. Instead, this is the line you need to change:

      content: '\e040' !important; 
      

      The \e040 is the code for the Houzz icon I've been using as an example. You should be able to get the code you need for your icon from the Socicon site as described above. If you can't find it, let me know which icon you're trying to use and I'll look it up for you. Thanks!

      Reply
  8. I inserted the code, with additional copies of the lines, in the header to add 3 additional non-social buttons to a page. Then, of course, I used 3 different less-popular social networks (dribbble, rss, and myspace). So my client now has icons for Google Maps, Email, Web Site and Facebook with the Social Network Module.

    Reply
  9. 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
    • 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
      • 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
    • You're welcome, Russ. I'll try my best to add it in to Divi Booster in the future 🙂

      Reply
  10. 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
    • 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 *

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

23 Comments

  1. This used to work great. But for some reason this code won't load the socicon font anymore. It shows rectangle icons now instead of the icons I replaced. Anyone got a solution?

    Reply
    • Hi Robin, it looks like the server hosting the socicon font is returning 403 (Access Denied) errors. I'm not sure if this is a temporary thing or something permanent. I'll try and take more of a look at this soon and see if I can figure out what's going on. It looks like it's still possible to download the socicon fonts (https://www.socicon.com/download), so one solution is to host the fonts on your own site and load them from there…

      Reply
  2. Thank you!

    Reply
  3. Whoohooo!! Thanks for this!

    Reply
    • Ha ha, you're welcome, Mike!

      Reply
  4. Where I have to insert the code? At Main Element?

    Reply
    • Hi Mario, go into the settings for your code module, then on the "Content" tab you should find a "Code" box (under the "Text" subheading). Place the code in there and it should work. I hope that makes sense, but let me know if not.

      Reply
  5. Thanks Dan, worked a treat. I really should buy you a coffee one of these days.

    Reply
    • Ha ha, sure. Maybe not today though – I've had too much already 😉

      Reply
  6. Hey, thanks very much for the tutorial. As I'm already using FontAwesome on my site, I used that instead to turn the MySpace (I wonder who still uses that…!) to GitHub. You can see the result on https://noellesteegs.com/project/buzzbrand/ (work in progress).

    Reply
    • Hey Noëlle, nice work – the footer looks great. Yeah, I'm not quite sure who uses MySpace these days… 😉

      Reply
  7. Has this been added to DiviBooster yet?

    Reply
    • Hey Joe, I haven't been able to tackle it yet, but hopefully I'll be able to get to it soon. I'll update here when I do. If you can let me know which icons you'd like to see in there I'll add them to my list and make sure they are included. Thanks!

      Reply
      • Hey Joe, I've just released Divi Booster 3.0.6 which adds the 300 or so icons from the socicon font set into the social media follow module, alongside the built-in Divi ones. These are the same icons Divi Booster already makes available in the header / footer. Hope it helps!

        Reply
    • Hey Dave, don't change that link – it's the stylesheet for all the icons, so you always want to load it. Instead, this is the line you need to change:

      content: '\e040' !important; 
      

      The \e040 is the code for the Houzz icon I've been using as an example. You should be able to get the code you need for your icon from the Socicon site as described above. If you can't find it, let me know which icon you're trying to use and I'll look it up for you. Thanks!

      Reply
  8. I inserted the code, with additional copies of the lines, in the header to add 3 additional non-social buttons to a page. Then, of course, I used 3 different less-popular social networks (dribbble, rss, and myspace). So my client now has icons for Google Maps, Email, Web Site and Facebook with the Social Network Module.

    Reply
  9. 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
    • 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
      • 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
    • You're welcome, Russ. I'll try my best to add it in to Divi Booster in the future 🙂

      Reply
  10. 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
    • 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 *