Skip to content

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 write:

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

That’s it! Enjoy your day!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.