There are so many times that I wanted to add a website icon alongside with the social media icons. You may have realized that standard Divi Social Media Module only comes with Social Media Icons and there is no Website icon.

 

So, How To Add Website Icon To Social Media Follow

Nothing to worry, we can change the icons with couple of CSS lines. But the problem is, how do we find an icon which shows a globe or a website icon? Fortunately, Elegent Themes has posted a blog post containing all of their Icon font codes. There you can see (In standard Divi icons) a globe icon is available.

Here is the blog post :  Elegent Themes Icon Font Blog Post

 

Let’s Structure

Let’s built the module. First insert a Divi Social Media Follow Module into page. When you first add it, it will look like the below image.

Website icon social media

There is a tricky part here, we are going to change the icon of an existing social media icon. Here, I’m gonna to change RSS icon to a website icon. Lets add the RSS icon.

Website icon social media

I want my icons to be rounded, therefor I’ll increase the border radius to 100%. We can do it by navigating into Design settings of the Social Media Module.

CSS Magic

What we have to do now is to get the accosiated class name based on the icon we selected. To get that, we need to inspect the page. Just right click on the page and click on “Inspect” and select the relevant element from the Element’s tab.

Website icon social media

Okay, now we have everything in our hand. I’m going to specifically target this module when writing CSS. Therefore I’m going to add a class to my Social Media Follow Divi Module. To add a class, go to settings of the module and then to Advanced tab.

Next, lets find the icon code of the Website icon from the Elegent Themes Blog.

 

Website icon social media

If you inspect the current icon and check the font code it’s “\e09e” for RSS icon. 

Website icon social media

 We are going to change it to “\e0e3” with CSS. Below is the CSS code that you should add.


.wdp_social_media_follow .et-social-rss a.icon:before{
    content:"\e0e3"!important;
}
When you enter the CSS code and save. It should look like below. Insted of RSS link you can insert your link.

Conclusion – How To Add Website Icon To Social Media Follow

I hope that you now know how to change and icon of Social Media Module, if the icon that you want doesn’t exist. That is how I have implemented the Author Info box which is below. Thank you for reading this blog post. Feel free to share and comment if you find this helpful. I will see you again in the next tutorial. Don’t forget to read our blog to find more exciting things. Till have a great week.