how to use sprite image in your code

Sprite image

    

        Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because the website won't need to request each icon as it can load the image with a single request.

How to use sprite images:

    

        The basic idea behind the sprite usage is to load the image using CSS and set the position of the image relative to the icon's position. e.g. if an image is 200 * 800 size with each icon being 200* 200 in size. Then the image would have 4 icons. we can use the first icon by using the span icon's background property and setting the background position to 0 0 coordinates along with its width and height to be 200 * 200.

Example  

HTML

    <span class="twitter-icon" ></span>    

CSS

.twitter-icon : {

background-image: url(" path of image");

width:200px;

height:200px;

background-position: 0px 0xp;

}

    

We can then load the next icon by setting the background position: 0 200px which will show the next icon. 

P.S. The best way to set icons properly is using DOM CSS and manipulating them according to your requirements and then setting those values as actual values.