If you’re a fan of StudioPress and Genesis Framework, you probably noticed that they use Simple Social Icons plugin in many of their theme demo sites. It is a lightweight plugin that makes use of icon fonts, which means no additional images are needed to output the icons.
For example. here’s what you’ll see from Genesis 2.0 demo site:
Once you’ve installed the plugin, from the widget settings panel, you’ll be able to change the color of the font and background very easily. However, they’ll be applied to all of the icons. For example, if you choose orange to be the background color for the icons on hover, each and every icon will have similar orange color.
To change this, you may use the following suggested styling. Simple drop this in your style.css file.
Note: If you want the colors to show up by default, simply delete the hover pseudo-class from the code. For example, the .simple-social-icons .social-dribbble a:hover will be .simple-social-icons .social-dribbble a
Leave a Reply