Display Social Icons Using a Single Image and CSS Sprites

Date: 10/15/2015, Author: Lostwake, Category: CSS Tricks

First, get your Icon Image or use the one I am using for this blog:

Next, figure out the size of the icons on this image. The one above is 52px by 52px.

To make this work you will need to use the following css to get the icons.

.icon { 
height:45px; 
width:45px; 
background-image:url('images/web_icons.png'); 
/*your location of the image may differ*/ 
} 
.facebook {background-position:0px 0px;} 
.twitter {background-position:-52px 0px;} 
.googleplus {background-position:-155px -52px;} 

Finally use HTML to display the Icons:

div class="icon facebook">   

 

Please let me know if you have questions in the comment.

Source: webdesigndev.com

Comments: