<!-- HERE'S THE CSS -->
<!-- You'll need to download the image files from my blog here: http://blog.brandonsetter.com/60-beautiful-css-sprite-social-media-icons/ -->
/* Super Massive CSS-Sprite Social Media Icon Set Start */
ul.socialicons { list-style-type: none; }
ul.socialicons li { list-style-type: none; display: inline; float: left; padding: 0 5px 0 0; }
ul.color li a { background: url('supermassivecsspriteicons2.png') no-repeat 0 0; }
ul.bw li a { background: url('supermassivecsspriteicons.png') no-repeat 0 0; }
ul.socialicons li a { text-indent: -9999px; width: 32px; height: 33px; display: block; overflow: hidden; margin: 2px; }
/* Each icon's sprite coordinates */
ul.socialicons li a.stumbleupon { background-position: 0 0; }
ul.socialicons li a.stumbleupon:hover { background-position: -38px 0; }
ul.socialicons li a.digg { background-position: 0 -36px; }
ul.socialicons li a.digg:hover { background-position: -38px -36px; }
ul.socialicons li a.facebook { background-position: 0 -73px; }
ul.socialicons li a.facebook:hover { background-position: -38px -73px; }
ul.socialicons li a.twitter { background-position: 0 -109px; }
ul.socialicons li a.twitter:hover { background-position: -38px -109px; }
ul.socialicons li a.delicious { background-position: 0 -146px; }
ul.socialicons li a.delicious:hover { background-position: -38px -146px; }
ul.socialicons li a.flickr { background-position: 0 -183px; }
ul.socialicons li a.flickr:hover { background-position: -38px -183px; }
ul.socialicons li a.youtube { background-position: 0 -219px; }
ul.socialicons li a.youtube:hover { background-position: -38px -219px; }
ul.socialicons li a.skype { background-position: 0 -256px; }
ul.socialicons li a.skype:hover { background-position: -38px -256px; }
ul.socialicons li a.linkedin { background-position: 0 -292px; }
ul.socialicons li a.linkedin:hover { background-position: -38px -292px; }
ul.socialicons li a.vimeo { background-position: 0 -329px; }
ul.socialicons li a.vimeo:hover { background-position: -38px -329px; }
ul.socialicons li a.blogger { background-position: 0 -365px; }
ul.socialicons li a.blogger:hover { background-position: -38px -365px; }
ul.socialicons li a.tumblr { background-position: 0 -402px; }
ul.socialicons li a.tumblr:hover { background-position: -38px -402px; }
ul.socialicons li a.picasa { background-position: 0 -438px; }
ul.socialicons li a.picasa:hover { background-position: -38px -438px; }
ul.socialicons li a.wordpress { background-position: 0 -475px; }
ul.socialicons li a.wordpress:hover { background-position: -38px -475px; }
ul.socialicons li a.rss { background-position: 0 -511px; }
ul.socialicons li a.rss:hover { background-position: -38px -511px; }
ul.socialicons li a.mobileme { background-position: 0 -548px; }
ul.socialicons li mobileme:hover { background-position: -38px -548px; }
ul.socialicons li a.apple { background-position: 0 -585px; }
ul.socialicons li a.apple:hover { background-position: -38px -585px; }
ul.socialicons li a.gpluslight { background-position: 0 -621px; }
ul.socialicons li a.gpluslight:hover { background-position: -38px -621px; }
ul.socialicons li a.gplusdark { background-position: 0 -694px; }
ul.socialicons li a.gplusdark:hover { background-position: -38px -694px; }
ul.socialicons li a.twitterb { background-position: 0 -658px; }
ul.socialicons li a.twitterb:hover { background-position: -38px -658px; }
ul.socialicons li a.instagram { background-position: 0 -731px; }
ul.socialicons li a.instagram:hover { background-position: -38px -731px; }
ul.socialicons li a.myspace { background-position: 0 -767px; }
ul.socialicons li a.myspace:hover { background-position: -38px -767px; }
ul.socialicons li a.dribble { background-position: 0 -803px; }
ul.socialicons li a.dribble:hover { background-position: -38px -803px; }
ul.socialicons li a.blip { background-position: 0 -838px; }
ul.socialicons li a.blip:hover { background-position: -38px -838px; }
ul.socialicons li a.spotify { background-position: 0 -874px; }
ul.socialicons li a.spotify:hover { background-position: -38px -874px; }
ul.socialicons li a.grooveshark { background-position: 0 -910px; }
ul.socialicons li a.grooveshark:hover { background-position: -38px -910px; }
ul.socialicons li a.ichat { background-position: 0 -946px; }
ul.socialicons li a.ichat:hover { background-position: -38px -946px; }
ul.socialicons li a.github { background-position: 0 -981px; }
ul.socialicons li a.github:hover { background-position: -38px -981px; }
ul.socialicons li a.soundcloud { background-position: 0 -1017px; }
ul.socialicons li a.soundcloud:hover { background-position: -38px -1017px; }
ul.socialicons li a.pinterest { background-position: 0 -1053px; }
ul.socialicons li a.pinterest:hover { background-position: -38px -1053px; }
ul.socialicons li a.smugmug { background-position: 0 -1088px; }
ul.socialicons li a.smugmug:hover { background-position: -38px -1088px; }
ul.socialicons li a.virb { background-position: 0 -1124px; }
ul.socialicons li a.virb:hover { background-position: -38px -1124px; }
ul.socialicons li a.technorait { background-position: 0 -1160px; }
ul.socialicons li a.technorait:hover { background-position: -38px -1160px; }
ul.socialicons li a.slashdot { background-position: 0 -1195px; }
ul.socialicons li a.slashdot:hover { background-position: -38px -1195px; }
ul.socialicons li a.sharethis { background-position: 0 -1231px; }
ul.socialicons li a.sharethis:hover { background-position: -38px -1231px; }
ul.socialicons li a.posterous { background-position: 0 -1267px; }
ul.socialicons li a.posterous:hover { background-position: -38px -1267px; }
ul.socialicons li a.googleb { background-position: 0 -1302px; }
ul.socialicons li a.googleb:hover { background-position: -38px -1302px; }
ul.socialicons li a.reddit { background-position: 0 -1338px; }
ul.socialicons li a.reddit:hover { background-position: -38px -1338px; }
ul.socialicons li a.friendfollow { background-position: 0 -1374px; }
ul.socialicons li a.friendfollow:hover { background-position: -38px -1374px; }
ul.socialicons li a.designfloat { background-position: 0 -1409px; }
ul.socialicons li a.designfloat:hover { background-position: -38px -1409px; }
ul.socialicons li a.amazon { background-position: 0 -1445px; }
ul.socialicons li a.amazon:hover { background-position: -38px -1445px; }
ul.socialicons li a.netvibes { background-position: 0 -1481px; }
ul.socialicons li a.netvibes:hover { background-position: -38px -1481px; }
ul.socialicons li a.bing { background-position: 0 -1516px; }
ul.socialicons li a.bing:hover { background-position: -38px -1516px; }
ul.socialicons li a.yahoo { background-position: 0 -1552px; }
ul.socialicons li a.yahoo:hover { background-position: -38px -1552px; }
ul.socialicons li a.aim { background-position: 0 -1588px; }
ul.socialicons li a.aim:hover { background-position: -38px -1588px; }
ul.socialicons li a.email { background-position: 0 -1623px; }
ul.socialicons li a.email:hover { background-position: -38px -1623px; }
ul.socialicons li a.ebay { background-position: 0 -1659px; }
ul.socialicons li a.ebay:hover { background-position: -38px -1659px; }
ul.socialicons li a.paypal { background-position: 0 -1695px; }
ul.socialicons li a.paypal:hover { background-position: -38px -1695px; }
ul.socialicons li a.feedburner { background-position: 0 -1730px; }
ul.socialicons li a.feedburner:hover { background-position: -38px -1730px; }
ul.socialicons li a.podcast { background-position: 0 -1766px; }
ul.socialicons li a.podcast:hover { background-position: -38px -1766px; }
ul.socialicons li a.appstoreios { background-position: 0 -1802px; }
ul.socialicons li a.appstoreios:hover { background-position: -38px -1802px; }
ul.socialicons li a.itunes { background-position: 0 -1837px; }
ul.socialicons li a.itunes:hover { background-position: -38px -1837px; }
ul.socialicons li a.appstoremac { background-position: 0 -1873px; }
ul.socialicons li a.appstoremac:hover { background-position: -38px -1873px; }
ul.socialicons li a.yelp { background-position: 0 -1909px; }
ul.socialicons li a.yelp:hover { background-position: -38px -1909px; }
ul.socialicons li a.wthree { background-position: 0 -1944px; }
ul.socialicons li a.wthree:hover { background-position: -38px -1944px; }
ul.socialicons li a.etsy { background-position: 0 -1980px; }
ul.socialicons li a.etsy:hover { background-position: -38px -1980px; }
ul.socialicons li a.stackoverflow { background-position: 0 -2016px; }
ul.socialicons li a.stackoverflow:hover { background-position: -38px -2016px; }
ul.socialicons li a.foursquare { background-position: 0 -2051px; }
ul.socialicons li a.foursquare:hover { background-position: -38px -2051px; }
ul.socialicons li a.quora { background-position: 0 -2087px; }
ul.socialicons li a.quora:hover { background-position: -38px -2087px; }
ul.socialicons li a.photobucket { background-position: 0 -2123px; }
ul.socialicons li a.photobucket:hover { background-position: -38px -2123px; }
</style>
<!-- HERE'S THE HTML -->
<!-- CSS-Sprite Social Media Icon Set Start -->
<!-- **Don't forget to put url's inside the href="" -->
<ul class="socialicons color"> <!-- Change "color" to "bw" to use the greyscale icon set. -->
<li><a href="" class="stumbleupon" target="_blank">stumbleupon</a></li>
<li><a href="" class="digg" target="_blank">digg</a></li>
<li><a href="" class="facebook" target="_blank">facebook</a></li>
<li><a href="" class="twitter" target="_blank">twitter</a></li>
<li><a href="" class="delicious" target="_blank">delicious</a></li>
<li><a href="" class="flickr" target="_blank">flickr</a></li>
<li><a href="" class="youtube" target="_blank">youtube</a></li>
<li><a href="" class="skype" target="_blank">skype</a></li>
<li><a href="" class="linkedin" target="_blank">linkedin</a></li>
<li><a href="" class="vimeo" target="_blank">vimeo</a></li>
<li><a href="" class="blogger" target="_blank">blogger</a></li>
<li><a href="" class="tumblr" target="_blank">tumblr</a></li>
<li><a href="" class="picasa" target="_blank">picasa</a></li>
<li><a href="" class="wordpress" target="_blank">wordpress</a></li>
<li><a href="" class="rss" target="_blank">rss</a></li>
<li><a href="" class="mobileme" target="_blank">mobileme</a></li>
<li><a href="" class="apple" target="_blank">apple</a></li>
<li><a href="" class="gpluslight" target="_blank">gpluslight</a></li>
<li><a href="" class="gplusdark" target="_blank">gplusdark</a></li>
<li><a href="" class="twitterb" target="_blank">twitterbird</a></li>
<li><a href="" class="instagram" target="_blank">instagram</a></li>
<li><a href="" class="myspace" target="_blank">myspace</a></li>
<li><a href="" class="dribble" target="_blank">dribble</a></li>
<li><a href="" class="blip" target="_blank">blip</a></li>
<li><a href="" class="spotify" target="_blank">spotify</a></li>
<li><a href="" class="grooveshark" target="_blank">grooveshark</a></li>
<li><a href="" class="ichat" target="_blank">ichat</a></li>
<li><a href="" class="github" target="_blank">github</a></li>
<li><a href="" class="soundcloud" target="_blank">soundcloud</a></li>
<li><a href="" class="pinterest" target="_blank">pinterest</a></li>
<li><a href="" class="smugmug" target="_blank">smugmug</a></li>
<li><a href="" class="virb" target="_blank">virb</a></li>
<li><a href="" class="technorati" target="_blank">technorati</a></li>
<li><a href="" class="slashdot" target="_blank">slashdot</a></li>
<li><a href="" class="sharethis" target="_blank">sharethis</a></li>
<li><a href="" class="posterous" target="_blank">posterous</a></li>
<li><a href="" class="googleb" target="_blank">googleb</a></li>
<li><a href="" class="reddit" target="_blank">reddit</a></li>
<li><a href="" class="friendfollow" target="_blank">friendfollow</a></li>
<li><a href="" class="designfloat" target="_blank">designfloat</a></li>
<li><a href="" class="amazon" target="_blank">amazon</a></li>
<li><a href="" class="netvibes" target="_blank">netvibes</a></li>
<li><a href="" class="bing" target="_blank">bing</a></li>
<li><a href="" class="yahoo" target="_blank">yahoo</a></li>
<li><a href="" class="aim" target="_blank">aim</a></li>
<li><a href="" class="email" target="_blank">email</a></li>
<li><a href="" class="ebay" target="_blank">ebay</a></li>
<li><a href="" class="paypal" target="_blank">paypal</a></li>
<li><a href="" class="feedburner" target="_blank">feedburner</a></li>
<li><a href="" class="podcast" target="_blank">podcast</a></li>
<li><a href="" class="appstoreios" target="_blank">appstoreios</a></li>
<li><a href="" class="itunes" target="_blank">itunes</a></li>
<li><a href="" class="appstoremac" target="_blank">appstoremac</a></li>
<li><a href="" class="yelp" target="_blank">yelp</a></li>
<li><a href="" class="wthree" target="_blank">wthree</a></li>
<li><a href="" class="etsy" target="_blank">etsy</a></li>
<li><a href="" class="stackoverflow" target="_blank">stackoverflow</a></li>
<li><a href="" class="foursquare" target="_blank">foursquare</a></li>
<li><a href="" class="quora" target="_blank">quora</a></li>
<li><a href="" class="photobucket" target="_blank">photobucket</a></li>
</ul>
<!-- Super Massive CSS-Sprite Icon Set End -->