Have you ever wanted to add a custom social media image or icon to divi but the social platform you needed to add wasn’t something very popular or included in any of the font sets available out there?  Well, guess what? There is a super easy way to add an image without the need of installing font sets and all the business.

I’m surprised divi hasn’t already created an option to choose a custom social media icon in the divi social media module. I guess it’s not at the top of their to do list at the moment. However, if you want to jimmy rig an image in there, you can do so very easily with the instructions below.

We are simply going to use the ‘URL’ attribute of the CSS property ‘content’. Here is how.

1. Open the Divi Social Media Module wherever you have it placed and choose a social platform you are currently not using. Google + is a great choice cause most people aren’t using that since it’s been shut down.

2. Apply your customizations as usual. Click save.

3. Create a transparent PNG of your social icon/image in photoshop and make certain the canvas is square. For example: My icons are 32×32. So I made my custom image 18px wide by 18px high. So that leaves about 7px of padding in the top, right, bottom and left of the area I’m installing the image. Use your own discretion for your own sizing.

4. Upload your image to the media gallery of your wordpress website. Copy the URL path given to the image. Don’t forget to add your alt text for better SEO. Do as I say, not as I do.

5. Go to Divi theme options panel and add the following code to your custom CSS. Click save and have a looksy.

.et-social-google-plus a.icon:before {
content: url(https://yourpersonalwebsite.com/wp-content/uploads/2020/10/yourimage.png);
}

Optimize The Custom Image

Now obviously I’m not very happy the image is pixelated because of the small size I needed to use. Try creating a crisp clear and optimized image by converting your jpg/png to an SVG image. This alternative method can open you up to security issues, so use with caution. Learn how to safely enable SVG support on wordpress.

If you are going to use another social media platform to replace and need the CSS selector codes, you can find more of them in this great tutorial on How to add MORE icons to the divi social media module by PEE-AYE Creative. He even shows you how to remove the tooltip hover text.

Other ways to customize the divi social media icons.

Divi tutorial that shows you how to add the social media module on your website in various areas.

Here is a video tutorial on how to add social media icons to your menu using divi menu.

Here is a tutorial that shows you how to customize the social icons that are included in the default header and footer of divi theme.