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!