I had written this code a few years ago for use on a website although not the icon sprite I’m including… I needed to use it recently so I’ve decided to upload it here too..
I know it’s not the most elegant solution, but it works well over all browsers and fallbacks (no CSS) gracefully as a list, finally if there isn’t an actual icon available for your social networking site, then it will default to the ‘share this’ icon.
CSS:
/* =================================================
* @package: Social Links
* @author: Adam Boutcher <adam@aboutcher.co.uk>
* @link: www.aboutcher.co.uk
* @copyright: 2013
* @internal: Default icon is "Share This"
* Icons are CC-Attrib3 - www.awicons.com
* ================================================= */
.social_links{margin:0;text-align:center;}.social_links .social_t{display:block;font-variant:small-caps;margin-bottom:5px;}
.social_links ul{display:inline-block;*display:inline;*zoom:1;list-style-type:none;margin:0 auto;padding:0;}
.social_links ul li{float:left;margin:0;padding:0;}.social_links .social_i{display:block;width:36px;height:36px;overflow:hidden;margin-right:5px;color:transparent;text-indent:-9999px;background:url('/images/icons/social_sprite.png') no-repeat;}
.social_links .social_i:hover{background-position:0 -36px;}.social_links ul>li:last-child .social_i{margin-right:0;}
.social_links .fb{background-position:-36px 0;}.social_links .fb:hover{background-position:-36px -36px;} /* Facebook */
.social_links .tw{background-position:-72px 0;}.social_links .tw:hover{background-position:-72px -36px;} /* Twitter */
.social_links .gp{background-position:-108px 0;}.social_links .gp:hover{background-position:-108px -36px;}/* Google+ */
.social_links .rs{background-position:-144px 0;}.social_links .rs:hover{background-position:-144px -36px;}/* RSS Feed */
.social_links .pt{background-position:-180px 0;}.social_links .pt:hover{background-position:-180px -36px;}/* Pintrest */
.social_links .li{background-position:-216px 0;}.social_links .li:hover{background-position:-216px -36px;}/* LinkedIn */
.social_links .yt{background-position:-252px 0;}.social_links .yt:hover{background-position:-252px -36px;}/* YouTube */
.social_links .em{background-position:-288px 0;}.social_links .em:hover{background-position:-288px -36px;}/* Email */
.social_links .ad{background-position:-324px 0;}.social_links .ad:hover{background-position:-324px -36px;}/* Add */
.social_links .rd{background-position:-360px 0;}.social_links .rd:hover{background-position:-360px -36px;}/* Reddit */
.social_links .su{background-position:-396px 0;}.social_links .su:hover{background-position:-396px -36px;}/* StumbleUpon */
.social_links .dl{background-position:-432px 0;}.social_links .dl:hover{background-position:-432px -36px;}/* Delicious */
.social_links .dg{background-position:-468px 0;}.social_links .dg:hover{background-position:-468px -36px;}/* Digg */
.social_links .gh{background-position:-504px 0;}.social_links .gh:hover{background-position:-504px -36px;}/* GitHub */
.social_links .cp{background-position:-540px 0;}.social_links .cp:hover{background-position:-540px -36px;}/* CodePen */
HTML:
Image Sprite:
Social Media Icon Sprite
You can see a demo of it on the footer of this site too; I will try to include other sprites if I can find the time to make them.
Edit (6th July 2013):
Added GitHub to the icon list and changed the code to be a class over an id so it can be used multiple times in the same page; also added CodePen icon.