CSS hack to get optimised icons

Posted by Jeremy on 29 July 2009 | 0 Comments

Tags: ui, css

It is good practice to include your website's icons in one image to prevent the client browser making a http request for each icon, which could mean tens or hundreds of requests.

Here is an example image from jquery ui that includes lots of icons:

Problem:

You can't include these icons on buttons without icons showing up in the background. To include them as inline elements, you need to do tricky stuff with divs and spans.

Solution:

Put the background on a transparent GIF image. This lets you treat your icon like an image.

examples to come...

 

This has probably been done before, but I couldn't find anything on the net when I had the problem.