Show Colors Of Social Sharing Buttons

Description
Here is how to display the colors of the different sharing buttons of the main social networks.

This code works for the buttons displayed on the lists in the “Contact information” block but also for the buttons displayed in the footer of the site.

BONUS : la dernière ligne permet de ne pas afficher certains réseaux
.social-icon_item__3SLnb .fa-facebook {
background-color: #4867AA!important;
color: white!important;
}

.social-icon_item__3SLnb .fa-youtube {
background-color: #D20001!important;
color: white!important;
}

.social-icon_item__3SLnb .fa-instagram {
color: white!important;
background:
radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.social-icon_item__3SLnb .fa-whatsapp {
background-color: #00E676!important;
color: white!important;
}

.social-icon_item__3SLnb .fa-linkedin {
background-color: #0A66C2!important;
color: white!important;
}

.social-icon_item__3SLnb .fa-twitter {
background-color: #1DA1F2!important;
color: white!important;
}

/* Disabled particular socials buttons */
.social-icon_module__HOrwr .fa-tumblr, .social-icon_module__HOrwr .fa-vk,
.social-icon_module__HOrwr .fa-pinterest, .social-icon_module__HOrwr .fa-stumbleupon{
display: none;
}

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

WilCity Guide Bug Report