Sprites are basically a bunch of images or icons smushed into one image to help better the performance of your website.
Say you have a bunch of icons you want to use in your website you could go in photoshop and combine them into one file like this
Let's say you wanted to display the linked in square image as a link in your website you could do this
background: url('imgs/social-header.png') no-repeat -48px -159px;
This allows you to grab the portion of the image where your icon is located and display it with a class. Then where you want your icon link you could do this.
<a href="#" class="sprite"></a>
Amazing right? yeah it is!
Now there is an amazing resource out there that is available to help you with finding the positions within the sprite called sprite cow which you can visit here http://www.spritecow.com/
This allows you to select the icon from the image that you want to display.
Feel free to drop a question below. Thanks 😄