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.
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.
I think you could wrap your CSS rule in a media query and modify it to change the positioning on smaller screens.
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.
I do not know that theme and it really doesn’t relate to Simple Social Icons
Awesome, thanks! I was just wondering if this could be done. I’m going to try it out soon!
You can also make them round if you want.
Can you share how to make them round please?
Nevermind!
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.
Hi Zimbrul
Yep. Trying to make my site look more presentable. Think it looks a bit better.
Thanks for the compliment.