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.

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.

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 are closed.