How to change background color of social share icons?

Hello Roger,

{ I do not work for JoomShaper }

You can do that using CSS (and that I know of, it is the only way you can do that)...

Depending exactly on the icon, it's either by updating the CSS :

#sppb-addon-1545207753666 h3.sppb-addon-title .sppb-addon-title-icon
{ -webkit-text-fill-color: #243c64;} to another color

or

.fa-facebook {
      background-color: #243c64;
}

I would have given you the exact CSS if could have found the Social Media icons.

Cheers,

E.

I succeed in downloading a new .svg X symbol from FontAwesome. I have attached see link...

https://easyupload.io/mtsu5w

This then left me with the new logo but the old twitter blue in the Social Share add-in icon.

I have added the following 'custom css' to my Helix Ultimate template to correct the 'X' to black with a 50% lighten on hover. Mine is in RGB format in the CSS code rather than HEX but you can change to what colours you require using the following useful website:

https://hexcolorcodes.org/lighten-color

Anyway my Custome CSS added corrects the Facebook Social Share icon to the new Facebook blue and Twitter to X in black:

.fa-twitter::before { content: url("/images/x-twitter.svg"); width: 14px;
display: inline-block; height: 14px; vertical-align: -0.125em;}

.fa-twitter:hover::before { content: url("/images/x-twitter.svg"); width: 14px;
display: inline-block; height: 14px; vertical-align: -0.125em;}

.sppb-social-share-style-solid ul li.sppb-social-share-twitter a { background-color: rgb(0, 0, 0); }

.sppb-social-share-style-solid:hover ul li.sppb-social-share-twitter a { background-color: rgb(50, 50, 50); }

.sppb-social-share-style-solid ul li.sppb-social-share-facebook a {
background-color: rgb(24, 119, 242);
}

.sppb-social-share-style-solid:hover ul li.sppb-social-share-facebook a {
background-color: rgb(44, 139, 255);
}

The result can be viewed: https://easyupload.io/9szyqp

Roger

My only question is how to get rid of the name 'Twitter' in the expanded Social Share icon and maybe just have the X in the centre?

See image:

https://easyupload.io/0cv4x0

Regards

Roger