• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

Simple Social Icons

Reader Interactions

Comments

  1. Brian Thomas says

    February 25, 2018 at 4:51 am

    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.

    Log in to Reply
    • Brad Dalton says

      February 25, 2018 at 1:25 pm

      I think you could wrap your CSS rule in a media query and modify it to change the positioning on smaller screens.

      @media only screen and (max-width: 600px) {
      
          .your-class {
              property: value;
          }
      
      }
      Log in to Reply
  2. Norma says

    November 13, 2013 at 11:10 pm

    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.

    Log in to Reply
    • Brad Dalton says

      November 14, 2013 at 10:19 am

      I do not know that theme and it really doesn’t relate to Simple Social Icons

      Log in to Reply
  3. Carolyn Y says

    November 12, 2013 at 5:32 pm

    Awesome, thanks! I was just wondering if this could be done. I’m going to try it out soon!

    Log in to Reply
    • Brad Dalton says

      November 13, 2013 at 2:19 am

      You can also make them round if you want.

      Log in to Reply
      • Jessica says

        June 6, 2014 at 9:31 pm

        Can you share how to make them round please?

        Log in to Reply
        • Jessica says

          June 6, 2014 at 9:38 pm

          Nevermind!

          Log in to Reply
  4. Zimbrul says

    November 12, 2013 at 11:54 am

    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.

    Log in to Reply
    • Brad Dalton says

      November 13, 2013 at 2:23 am

      Hi Zimbrul

      Yep. Trying to make my site look more presentable. Think it looks a bit better.

      Thanks for the compliment.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.