Figarts is now Pluginette. Enjoy fast support and high quality products.

Top, side, or bottom. Locate it anywhere, social media icons are everywhere. It’s more or less like the icing on the cake. Some love it dark, others grey and a few of us love to see the full colors of these icons. I’m sure your clients do too.

So, today, I am bringing you the CSS code to pack and dump in your never-ending CSS file. Feel free to add to it or remove as you wish. If you love it, please subscribe to this blog.

.icon-twitter { color: #00aced; color: rgb(0, 172, 237); }
.icon-facebook { color: #3b5998; color: rgb(59, 89, 152); }
.icon-googleplus { color: #dd4b39; color: rgb(221, 75, 57); }
.icon-rss { color: #f26522; color: rgb(242, 101, 34); }
.icon-pinterest { color: #cb2027; color: rgb(203, 32, 39); }
.icon-linkedin { color: #007bb6; color: rgb(0, 123, 182); }
.icon-youtube { color: #bb0000; color: rgb(187, 0, 0); }
.icon-vimeo { color: #1ab7ea; color: rgb(26, 183, 234); }
.icon-tumblr { color: #32506d; color: rgb(50, 80, 109); }
.icon-instagram { color: #bc2a8d; color: rgb(188, 42, 141); }
.icon-flickr { color: #ff0084; color: rgb(255, 0, 132); }
.icon-dribbble { color: #ea4c89; color: rgb(234, 76, 137); }
.icon-quora { color: #a82400; color: rgb(168, 36, 0); }
.icon-foursquare { color: #0072b1; color: rgb(0, 114, 177)}
.icon-forrst { color: #5B9A68; color: rgb(91, 154, 104); }
.icon-vk { color: #45668e; color: rgb(69, 102, 142); }
.icon-wordpress { color: #21759b; color: rgb(33, 117, 155); }
.icon-stumbleupon { color: #EB4823; color: rgb(235, 72, 35); }
.icon-yahoo { color: #7B0099; color: rgb(123, 0, 153); }
.icon-blogger { color: #fb8f3d; color: rgb(251, 143, 61); }
.icon-soundcloud { color: #ff3a00; color: rgb(255, 58, 0); }

Only the hex code is enough but in case you would like to add rgba, you can use the rgb code. For example, you can say:

.icon-soundcloud { color: #ff3a00; color: rgba(255, 58, 0, 0.5); }

That’s it! Enjoy your day!