In this post, i’ll give you the CSS code which you can use to change the background and hover colors of each button when using the Simple Social Icons plugin.
Patrick asked:
Hi, does anyone know if there is a way to change the color and hover color of each icon individually for Simple Social Icons? That is, I’d like each icon to be its traditional colors instead of all being the same color.
Simply add this CSS at the end of your child themes style.css file and change the hex color codes to suit your own styling preferences.
.simple-social-icons .social-facebook a {
background-color: #4965a0 !important;
}
.simple-social-icons .social-facebook a:hover {
background-color: orange !important;
}
.simple-social-icons .social-gplus a {
background-color: #dd4b39 !important;
}
.simple-social-icons .social-gplus a:hover {
background-color: black !important;
}
.simple-social-icons .social-twitter a {
background-color: #00abf0 !important;
}
.simple-social-icons .social-twitter a:hover {
background-color: grey !important;
}
Float Icons Left or Right
.simple-social-icons {
float: right;
}
Please check the FAQ on the plugin site for more details about which icons you can use.
The plugin has been developed by the lead developer of Genesis, Nathan Rice and StudioPress themes.
Brian Thomas says
When adding social icons to Outreach Pro there’s extra space added to the top of the icon area. When I adjust with CSS using a negative top margin it looks good on the desktop version, but the icon is on top of the logo in the mobile version. This is the website – http://thecabinretreat.com/
At the moment I removed the negative top margin so you can see how it looks when adding the social icon. Any help would be appreciated.
Brad Dalton says
I think you could wrap your CSS rule in a media query and modify it to change the positioning on smaller screens.
Norma says
I have the theme Zee but can NOT for the life of me get my logo at the top of the front page any larger. Nothing is working. Can you help? Please know I am not at all good with all the codes, etc.
Brad Dalton says
I do not know that theme and it really doesn’t relate to Simple Social Icons
Carolyn Y says
Awesome, thanks! I was just wondering if this could be done. I’m going to try it out soon!
Brad Dalton says
You can also make them round if you want.
Jessica says
Can you share how to make them round please?
Jessica says
Nevermind!
Zimbrul says
Great tip, thanks for it.
You’ve changed the look of your website again! I like it. The green header and the subscription field on top looks good.
Brad Dalton says
Hi Zimbrul
Yep. Trying to make my site look more presentable. Think it looks a bit better.
Thanks for the compliment.