One of the most efficient ways of adding social media icons to a website is to use a “sprite”. This “sprite” contains multiple images – in this case two instances of each social media icon that we want to use. So instead of having to download multiple images the browser can just download one image and then we can use CSS to control which part of this image is going to be visible at any point in time. In this example we are using carbon fiber social media icons.

The HTML for the social media icons is just a simple unordered list and we do all the heavy lifting with CSS.

Download Source

<ul class="social-media">
	<li class="facebook"><a href="https://www.facebook.com/"></a></li>
	<li class="googleplus"><a href="https://plus.google.com/"></a></li>
	<li class="instagram"><a href="http://instagram.com/"> </a></li>
	<li class="pinterest"><a href="http://pinterest.com/"> </a></li>
	<li class="rss"><a href="/news/"></a></li>
	<li class="twitter"><a href="https://twitter.com/"> </a></li>
	<li class="yelp"><a href="http://www.yelp.com/"> </a></li>
	<li class="youtube"><a href="http://www.youtube.com/"></a></li>
</ul>

ul.social-media
{
	list-style: none;
	display: inline-block;
}
ul.social-media li
{
	display: inline-block;
}
ul.social-media a
{
	display: inline-block;
	width:40px;height:40px;
	background-image:url('images/social-sprite-carbon-40.png');
	background-attachment: local;
	background-position: left top;
	margin: 0 2px;
}

ul.social-media .facebook   a      {background-position:    0px   0px;}
ul.social-media .facebook   a:hover{background-position:    0px -41px;}
ul.social-media .googleplus a      {background-position:  -41px   0px;}
ul.social-media .googleplus a:hover{background-position:  -41px -41px;}
ul.social-media .instagram  a      {background-position:  -82px   0px;}
ul.social-media .instagram  a:hover{background-position:  -82px -41px;}
ul.social-media .pinterest  a      {background-position: -123px   0px;}
ul.social-media .pinterest  a:hover{background-position: -123px -41px;}
ul.social-media .rss        a      {background-position: -164px   0px;}
ul.social-media .rss        a:hover{background-position: -164px -41px;}
ul.social-media .twitter    a      {background-position: -205px   0px;}
ul.social-media .twitter    a:hover{background-position: -205px -41px;} 
ul.social-media .yelp       a      {background-position: -246px   0px;}
ul.social-media .yelp       a:hover{background-position: -246px -41px;} 
ul.social-media .youtube    a      {background-position: -287px   0px;}
ul.social-media .youtube    a:hover{background-position: -287px -41px;} 

Download Source