How to Create Easy Social Icons with a CSS Sprite

Social Sprite Social networks are becoming an increasingly important aspect of marketing yourself and your website. I am personally signed up with at least 10 social networks, and actively use at least 3-5 every day. I think it’s almost necessary to link your different social networks on your website.

Sure, you could be old school and just throw links like this: Facebook | Twitter | LinkedIn.

But, let’s be real… Looks matter.

Below, you will find some code and a video that will help you put together an attractive looking Social Icon CSS Sprite for your website. This CSS Sprite will make it easy for you to add social icons as well as keeping your website quick by not making a dozen calls for images.

The Video

The Code

Below is the code that you will need to implement the Social Icons CSS Sprite. This is broken up into CSS that you will need to throw into your style.css and then some HTML that you can use anywhere in your website.

CSS

ul.socialicons {
	list-style: none;
	overflow: auto;
}
ul.socialicons li {
	width: 32px;
	height: 33px;
	padding: 0 5px 0 0;
	float: left;
}
ul.socialicons li a {
	width: 32px;
	height: 33px;
	display: block;
	background: url(socialSprite.png) no-repeat; 
}
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; }

HTML

This HTML can go anywhere in your theme. I threw HTML code similar to this in a Text widget on my WordPress blog.

<ul>
     <li>
          <a class="social network name here" href="link to social profile here"></a>
     </li>
</ul>

The Image

The only part of the puzzle that you’re missing now is the image. Take this image and upload it to your website. Then you will get the URL to the image and add it into the CSS by for ul.socialicons li a.

You can of course import this image into your favorite image editor and edit it to where there are only the icons you need. That will take more work, but can trim off a tad bit. Is it worth it? You tell me ;)

In Closing

After watching the video and getting the code from above, if you have any questions leave a comment below. I will get back to you as quick as possible. I’ve now got these icons rocking on my personal blog they’re working pretty well.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Comments

  • Jeni says:

    Hi Eric,
    Thanks for this tutorial – you’re going to make me dangerous. :) A quick question: if I want to start out with the grayed-out version and then have the hover switch it to the colored version, would I just switch those two places in the CSS?

    …and this isn’t exactly on-topic, but do you have an explanation for how people animate those hovers so the hover image “pops up” from below? I’m guessing this is jQuery.

    • Eric Binnion says:

      To start with the grayed-out version, you would just need to switch the :hover on each class. So a.stumbleupon:hover becomes a.stumbleupon and vice-versa.

      Shoot me an example of the hover image pop-up and I’ll take a look at it.

      Thanks for the comment Jeni :)

      • Jeni says:

        Link here. It came with a Genesis child theme I purchased on ThemeForest, and it rocks. I’d just love to be able to replicate it.

  • Thanks Eric. I am not savvy with creating sprites and probably this is my first step on adding this method on my site. I will give your recommendation a shot. :)

    • Eric Binnion says:

      Hi Arsie,

      Did you know that sprites became popular in old video games that had small memory constraints? Pretty interesting I think. That being said, I hope you enjoy this tutorial! :)

  • Dave says:

    Hey Eric,

    How do you create your own .png sprite file?
    Like if I want to change sprites, can I just create a random .png with sprites lined up like yours?

    Thanks

    • Eric Binnion says:

      Hi Dave,

      Sorry for the delay in my response. We have been working on other projects for the past few weeks.

      If you fit the images in the same spots as the provided sprite, then you should more or less be able to just swap out the image. To use the same CSS code, you’ll want to use icons that are 32px wide by 33px tall.

      Let me know if you have any other questions.

  • Bharath M says:

    Wow.. It worked perfectly.
    Thank you :)