Iconification : adding UI icons using (mostly) CSS

It is currently fairly easy to insert icons into the interface of your Drupal5 site using only CSS. However, there are one or two pitfalls and limitations along the way, which I hope to try and document. As ever, this is a work in progress, so please do share your thoughts and ideas by adding comments, or even new pages!

Important note for iconification of Garland themes: If you have color.module enabled, do not add your iconification CSS code to style.css! Otherwise, when you resubmit your color.module settings, color.module redirects all the icon file URL paths off into to the files/color/#colorschemecode/icons folder :-P If your icon images are very theme-specific (ie they only work within a given colour-scheme) this might be an advantage, but my approach is to try and use more generic icons in order to save lots of work :-) So ...

Groundwork: We need to do some filesystem groundwork before we get going - it's very easy, and the advantage of creating new (custom) files and folders is that they will not get overwritten when you update your Drupal installation files.

In your theme folder (eg Drupal5/Themes/Garland/icons.css):

1. create a new file called icons.css:. this keeps (almost) all our iconification code in one place.

2. next, edit the page.tpl.php file to append the following line of code to the style header calls:

3. create a new folder called 'icons' inside your theme folder (eg Drupal5/Themes/Garland/icons) to keep all your icon images together, and your filepaths simple.