I'm not going to spend a huge amount of time explaining what a
CSS Sprite is and how to create them. If you have found my site via
a search engine on the keyword of CSS Sprite, then you have already
visited several other sites on the topic. There are a lot of sites
that explain the process already. Here are a few that were helpful
for me:
But what I like to do is provide CSS and files that are useful
to everyone immediately. So here is my most used CSS Sprite
project. It basically adds a small icon beside different types of
links. Here is an example of the ten different type of supported
icons.
Here is the image. It is a small 4k file:
Here is the CSS:
/* Links with icons */
.noicon {background:none;}
.rss {background:transparent url(images/sprite.png) no-repeat right -40px;padding-right:20px;}
a[href ^="http://"], a[href ^="https://"] {background:transparent url(images/sprite.png) no-repeat right -140px;padding-right:20px;}
a[href ^="mailto:"] {background:transparent url(images/sprite.png) no-repeat right -1px;padding-right:20px;height:16px;}
a[href $='.zip'] {background:transparent url(images/sprite.png) no-repeat right -120px;padding-right:20px;}
a[href $='.pdf'] {background:transparent url(images/sprite.png) no-repeat right -60px;padding-right:20px;}
a[href $='.doc'], a[href $='.docx'] {background:transparent url(images/sprite.png) no-repeat right -100px;padding-right:20px;}
a[href $='.xls'], a[href $='.xlsx'] {background:transparent url(images/sprite.png) no-repeat right -20px;padding-right:20px;}
a[href $='.pps'], a[href $='.ppsx'], a[href $='.ppt'], a[href $='.pptx'] {background:transparent url(images/sprite.png) no-repeat right -80px;padding-right:20px;}
a[href $='vcf'] {background:transparent url(images/sprite.png) no-repeat right -154px;padding-right:20px;}
.sitemap {background:transparent url(images/sprite.png) no-repeat right -170px;padding-right:20px;}
You should be able to save the image and copy the CSS and use it
immediately.
I've also created a small demo HTML page that you can download and see in action. The
.zip file also includes the Photoshop file I used to create the
final image.
Feel free to use where ever you want. If you want to create a
link back to this page or my site, I'd appreciate it. But certainly
not required.
FYI - The icons are the standard 16x16 pixel size. So your line
height must be set to be at least that size. Also The CSS selector
used in most of these links, is only supported on "modern"
browsers. IE6 is not modern!