Social Media Icons…


Written by

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:

<div class="social_links"><span class="social_t">Find us on:</span>
<ul>
	<li><a class="social_i" title="Share" href="#" rel="nofollow">Share</a></li>
	<li><a class="social_i fb" title="Facebook" href="#" rel="nofollow">Facebook</a></li>
	<li><a class="social_i tw" title="Twitter: @username" href="#" rel="nofollow">Twitter</a></li>
	<li><a class="social_i gp" title="Google+" href="#" rel="nofollow">Google+</a></li>
	<li><a class="social_i rs" title="RSS Feed" href="#" rel="nofollow">RSS Feed</a></li>
	<li><a class="social_i pt" title="Pintrest" href="#" rel="nofollow">Pintrest</a></li>
	<li><a class="social_i li" title="LinkedIn" href="#" rel="nofollow">LinkedIn</a></li>
	<li><a class="social_i yt" title="YouTube" href="#" rel="nofollow">YouTube</a></li>
	<li><a class="social_i em" title="Email" href="#" rel="nofollow">Email</a></li>
	<li><a class="social_i ad" title="Add This" href="#" rel="nofollow">Add This</a></li>
	<li><a class="social_i rd" title="Reddit" href="#" rel="nofollow">Reddit</a></li>
	<li><a class="social_i su" title="Stumble Upon" href="#" rel="nofollow">StumbleUpon</a></li>
	<li><a class="social_i dl" title="Delicious" href="#" rel="nofollow">Delicious</a></li>
	<li><a class="social_i dg" title="Digg" href="#" rel="nofollow">Digg</a></li>
	<li><a class="social_i gh" title="GitHub" href="#" rel="nofollow">GitHub</a></li>
	<li><a class="social_i cp" title="CodePen" href="#" rel="nofollow">CodePen</a></li>
</ul>
</div>

Image Sprite:

Social Media Icons

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.