Here is a tip for webdesigners I really like. I would love to claim credit, but I actually saw it in dotnet magazine, and credit where it is due, this is brilliant.
Rather than drawing a new icon set for each project and fiddling with sprites, why not just go to fontello.com and choose the icons you want for a project and download them as a bespoke webfont. What you get is a font set (like the old MS wingdings) containing only the icons you need. There are hundreds of pre designed icons to cover a huge range of needs.
The benefits of this approach are wide ranging.
- Firstly websites can remain small.
- You can change colours and sizes with ease and even think about allowing users control over colour sets without a massive programming overhead.
- Because they are really text, these ‘icons’ can appear anywhere that html can go, including form fields, so no more problems with non re-sizing form background images.
- Font icons can scale to any size so no worries about retina displays and responsive designs
- You are assured of a cohesive look and feel from the start of the project (so it is also great for prototyping)
- Lastly and best of all it is free with no signup required.
Once you have downloaded your chosen icons as a set from fontello.com upload the file to your website and link to it via your style sheet as you would any other font file. If you need assistance, fontello helpfully include an example css file in the download to show you how to add an icon.