How to update share icon on single product page to original color

Hi Team,

How we can update icon of share button on Single product page with original icons.
I have tried to add below snipset code in theme setting for global custom CSS but no changes reflected.

body.single .icons-design-default .woodmart-social-icon.social-facebook {
color:#000080!important;
}
body.single .icons-design-default .woodmart-social-icon.social-twitter {
color:#00FFFF!important;
}

body.single .icons-design-default .woodmart-social-icon.social-whatsup {
color:#00FF00!important;
}

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.social-facebook .wd-icon:before {
    color: white;
    background-color: #365493;
    padding: 5px;
    border-radius: 50%;
}

.social-twitter .wd-icon:before {
    color: white;
    background: #3CF;
    padding: 5px;
    border-radius: 50%;
}

.social-pinterest .wd-icon:before {
    background: #CB2027;
    color: white;
    padding: 5px;
    border-radius: 50%;
}

.social-linkedin .wd-icon:before {
    background: #0274B3;
	    color: white;
    padding: 5px;
    border-radius: 50%;
}
.social-tg .wd-icon:before {
    background: #37AEE2;
		    color: white;
    padding: 5px;
    border-radius: 50%;
}

Best Regards

Hi Aizaz,

Its not worked as expected. My expectation is that when we hover on social icon then it should display its original social icon. And Facebook icon is also not proper. Please refer attach screen shots.

And i want to reorder/rearrange those icon how we can do it and want to include whatsup icon also. and also want to remove some of social link like pininterst and telegram.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the previous Custom CSS with the following.

.wd-social-icon:hover {
    color: #fff !important;
}
.social-facebook:hover {
    border-color: #365493;
    background-color: #365493;
}
.wd-social-icon {
    border: 2px solid #CCC;
    background-color: transparent;
    color: rgba(0,0,0,0.4) !important;
}

.social-twitter:hover {
    border-color: #3CF;
    background-color: #3CF;
}

.social-pinterest:hover {
    border-color: #CB2027;
    background-color: #CB2027;
}

.social-linkedin:hover {
    border-color: #0274B3;
    background-color: #0274B3;
}

.social-tg:hover {
    border-color: #37AEE2;
    background-color: #37AEE2;
}

You can configure the social icons from Theme Settings >> Social Profiles.

Best Regards

[Author]

Posts