WP SITES

2786

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Change Simple Social Icons Background & Hover Color

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.

Simple Social Icons

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.

Reader Interactions

Comments

  1. 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.

  2. 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.

Leave a Reply