In the last few days I’ve been working on a new “coming soon” page template (maybe premium) that I’m finishing and I’ll publish here soon. As you know, a coming soon page needs some social media links so the users can follow the progress of the new site or service you’re launching. For this, I decided to use the circle social icons set that I released here a few days ago and I modified the icons to match the design of the page.
I’m planning to pack them together with the new template, but today I wanted to make a dedicated post only for these icons.
This because they can save you a lot of time since you can include them in your websites very quickly and easily. I’ve saved them as PNG sprites with 2 states, a size of 24 x 24 pixels and I’ve also coded them in HTML/CSS. So, you only have to include some CSS lines on your stylesheet file and call the classes of the icons you want to use in your HTML. If you need to change the colors or sizes, there’s also a PSD file available in the package.
Preview
How to Use the Icons
The HTML
Below is the HTML code for using these social icons in your projects. As you can see every icon is a simple link with a different class name.
<div class="icons"> <a class="twitter" href=""></a> <a class="dribbble" href=""></a> <a class="rss" href=""></a> <a class="pinterest" href=""></a> <a class="digg" href=""></a> <a class="flickr" href=""></a> <a class="forrst" href=""></a> <a class="vimeo" href=""></a> <a class="reddit" href=""></a> <a class="linkedin" href=""></a> <a class="facebook" href=""></a> <a class="paypal" href=""></a> <a class="stumbleupon" href=""></a> <a class="email" href=""></a> <a class="deviantart" href=""></a> <a class="netvibes" href=""></a> <a class="yahoo" href=""></a> <a class="github" href=""></a> <a class="addthis" href=""></a> <a class="behance" href=""></a> <a class="blogger" href=""></a> <a class="slashdot" href=""></a> <a class="technorati" href=""></a> <a class="googleplus" href=""></a> <a class="apple" href=""></a> <a class="myspace" href=""></a> <a class="sharethis" href=""></a> <a class="yelp" href=""></a> <a class="delicious" href=""></a> <a class="lastfm" href=""></a> <a class="youtube" href=""></a> <a class="skype" href=""></a> <a class="tumblr" href=""></a> <a class="aim" href=""></a> <a class="google" href=""></a> </div>
The CSS
And here is the CSS code. On hover, we just slide up the icon’s background for changing the color. Note the CSS3 transition for adding a nice animation.
.icons a {
display: inline-block;
width: 24px;
height: 24px;
margin: 10px;
vertical-align: middle;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
}
.icons a.twitter { background: url(../img/social-icons/twitter.png) left top no-repeat; }
.icons a.dribbble { background: url(../img/social-icons/dribbble.png) left top no-repeat; }
.icons a.rss { background: url(../img/social-icons/rss.png) left top no-repeat; }
.icons a.pinterest { background: url(../img/social-icons/pinterest.png) left top no-repeat; }
.icons a.digg { background: url(../img/social-icons/digg.png) left top no-repeat; }
.icons a.flickr { background: url(../img/social-icons/flickr.png) left top no-repeat; }
.icons a.forrst { background: url(../img/social-icons/forrst.png) left top no-repeat; }
.icons a.vimeo { background: url(../img/social-icons/vimeo.png) left top no-repeat; }
.icons a.reddit { background: url(../img/social-icons/reddit.png) left top no-repeat; }
.icons a.linkedin { background: url(../img/social-icons/linkedin.png) left top no-repeat; }
.icons a.facebook { background: url(../img/social-icons/facebook.png) left top no-repeat; }
.icons a.paypal { background: url(../img/social-icons/paypal.png) left top no-repeat; }
.icons a.stumbleupon { background: url(../img/social-icons/stumbleupon.png) left top no-repeat; }
.icons a.email { background: url(../img/social-icons/email.png) left top no-repeat; }
.icons a.deviantart { background: url(../img/social-icons/deviantart.png) left top no-repeat; }
.icons a.netvibes { background: url(../img/social-icons/netvibes.png) left top no-repeat; }
.icons a.yahoo { background: url(../img/social-icons/yahoo.png) left top no-repeat; }
.icons a.github { background: url(../img/social-icons/github.png) left top no-repeat; }
.icons a.addthis { background: url(../img/social-icons/addthis.png) left top no-repeat; }
.icons a.behance { background: url(../img/social-icons/behance.png) left top no-repeat; }
.icons a.blogger { background: url(../img/social-icons/blogger.png) left top no-repeat; }
.icons a.slashdot { background: url(../img/social-icons/slashdot.png) left top no-repeat; }
.icons a.technorati { background: url(../img/social-icons/technorati.png) left top no-repeat; }
.icons a.googleplus { background: url(../img/social-icons/googleplus.png) left top no-repeat; }
.icons a.apple { background: url(../img/social-icons/apple.png) left top no-repeat; }
.icons a.myspace { background: url(../img/social-icons/myspace.png) left top no-repeat; }
.icons a.sharethis { background: url(../img/social-icons/sharethis.png) left top no-repeat; }
.icons a.yelp { background: url(../img/social-icons/yelp.png) left top no-repeat; }
.icons a.delicious { background: url(../img/social-icons/delicious.png) left top no-repeat; }
.icons a.lastfm { background: url(../img/social-icons/lastfm.png) left top no-repeat; }
.icons a.youtube { background: url(../img/social-icons/youtube.png) left top no-repeat; }
.icons a.skype { background: url(../img/social-icons/skype.png) left top no-repeat; }
.icons a.tumblr { background: url(../img/social-icons/tumblr.png) left top no-repeat; }
.icons a.aim { background: url(../img/social-icons/aim.png) left top no-repeat; }
.icons a.google { background: url(../img/social-icons/google.png) left top no-repeat; }
.icons a:hover { background-position: left -34px; }
Demo, Download and License
DOWNLOAD FILE: Social Icons Sprites (19868 downloads)
LICENSE:
You can use these social icons in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.
Want more?
Take a look at these premium social icon sets below:
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.
The icons are lovely and the effect is awesome, thanks for sharing.
Thanks Kate! I’m glad you like them.
thanks, it was very nice and helpful..
This is excelent. I have made a little different implementation by using the whole image as sprite for better performance. You can use all icons by mapping the coors.
/* CSS */
.icons a {
background: url(“http://farm9.staticflickr.com/8121/8627278242_cb3da02781_b.jpg”);
display: inline-block;
width: 24px;
height: 24px;
margin: 10px;
vertical-align: middle;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
}
.icons a.twitter { background-position: 359px 598px; }
.icons a.rss { background-position: 208px 598px; }
.icons a.pinterest { background-position: 133px 598px; }
.icons a.facebook { background-position: 359px 420px; }
.icons a.email { background-position: 133px 420px; }
.icons a.youtube { background-position: 359px 62px; }
.icons a.twitter:hover { background-position: 359px 632px; }
.icons a.rss:hover { background-position: 208px 632px; }
.icons a.pinterest:hover { background-position: 133px 632px; }
.icons a.facebook:hover { background-position: 359px 454px; }
.icons a.email:hover { background-position: 133px 454px; }
.icons a.youtube:hover { background-position: 359px 96px; }
awesome and very simple.. thanks
Awesome and very helpful. Thanks.
Do you know how to install this using WebPlus x6? I’m having a hell of a time trying to get this to work. It’s beautiful BTW.
No, sorry. I’ve never used it.
Hiya!
I love the icons! Thanks for them, and great work!!
I’d like to ask a bit of a noobish question. I can’t seem to get my head around it. With the CSS you’ve provided, the sprites transition from top to bottom. I’d like to do the opposite from ‘bottom’ to ‘top’ (so that it goes from gray to color).
I’ve played around with the css, and I’ve found how to get the ‘grey’ part showing, but not how to make it transition upwards.
again, thanks for the awesome icons
Hi,
You can do this by changing the background position. For example:
The twitter icon:
.icons a.twitter { background: url(../img/social-icons/twitter.png) left top no-repeat; }
Change it like this:
.icons a.twitter { background: url(../img/social-icons/twitter.png) left bottom no-repeat; }
And then, to make it transition from bottom to top, change the background position of the hover state:
.icons a:hover { background-position: left top; }
Heya Anil,
Thanks for the tip!
Btw, I really do love these icons, pretty class if you ask me.
All the best
This might seem like a task… but I’m using Dreamweaver CS6, with the CSS you’ve provided, I’n not sure where to insert it.
Noob… I know, I’m sorry!
Great work though!
Cheers! 🙂
So cool man.
I downloaded and modify with black color first 🙂
Thank you so much 🙂
Very nice! Just what i was looking for. Thank you!
No GitHub icon 🙁
beautiful
witch code need to insert this to wordpress blog?
Thanks! Very nice Social Media Icons!
Hi, I like these, and chance you can add an instagram one? Otherwise I won’t be able to use them 🙁
thanks!