Change Social Icon Color

How can I change social media icon colors I’m using in the footer? I want them to be the official colors. I’m getting colors on hover but I want the official colors without hover too.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body footer .icons-design-bordered .woodmart-social-icon {
  color: red!important;
	border:2px solid red;
}

Best Regards

I think you didn’t get my question. The code turns icon into red. But, I want the official colors of icons. For example blue for Facebook, Red for YouTube. I have attached an example. https://prnt.sc/qrg7is

Hello,

They icons you show are buttons. The footer has outlined icons. Here is the code for each separate icon and you can set the colors as per your needs:

body footer .icons-design-bordered .woodmart-social-icon i.fa-facebook {
background-color:blue;
  color: white!important;
 border:2px solid red;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-twitter {
background-color:blue;
  color: white!important;
 border:2px solid red;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-envelope{
background-color:blue;
  color: white!important;
 border:2px solid red;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-pinterest{
background-color:blue;
  color: white!important;
 border:2px solid red;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-linkedin {
background-color:blue;
  color: white!important;
 border:2px solid red;
}

Best Regards

This is what I got after putting the code. I have attached image.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this one:

body footer .icons-design-bordered .woodmart-social-icon i.fa-facebook {
background-color:blue;
  color: white!important;
 border:2px solid red;
	width:32px;
	height:32px;
	border-radius:30px;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-instagram {
background-color:blue;
  color: white!important;
 border:2px solid red;
		width:32px;
	height:32px;
	border-radius:30px;
}
body footer .icons-design-bordered .woodmart-social-icon i.fa-youtube{
background-color:blue;
  color: white!important;
 border:2px solid red;
		width:32px;
	height:32px;
	border-radius:30px;
}

body footer .icons-design-bordered .woodmart-social-icon i.fa-linkedin {
background-color:blue;
  color: white!important;
 border:2px solid red;
		width:30px;
	height:30px;
	border-radius:30px;
}
body footer .icons-design-bordered .woodmart-social-icon{
border:transparent;
}

Best Regards

[Author]

Posts