In the following steps, we will turn these icons into sprite images with a free CSS Sprite Generator Tool (http://spritegen.website-performance.org/):
Given the icons proper names, such as
twitter.pngandtwitter-hover.png, as shown in the following screenshot:
This naming convention also applies to other icons. You don't have to limit yourself to our example; you can provide more than three icons. After all the images are prepared, add these icons to a ZIP file.
Go to the CSS Generator Tool website (http://spritegen.website-performance.org/).
Upload the ZIP file that we created in Step 2.
Under the Sprite Output Options section, enter
10in the Horizontal Offset and Vertical Offset fields to set them to 10 px:
Then, click on the Create Sprite Image & CSS button, as shown in the following screenshot:
This will generate the sprite image as well as the CSS rule to display it.
Download the image and save it under the
imagesfolder in our working directory.Copy the...