This one can be filed under both “total impractical” and “somewhat useful”. For those who haven’t heard of this trick before, base64 encoding enables you to embed binary image data directly into your HTML or CSS source. Therefore, instead of the browser requesting two files from the server – the CSS file and the image file – only the CSS file need be requested. There are a number of drawbacks/pros/cons to this approach: IE doesn’t support it, file size limitations, larger CSS files, inability to separately cache CSS vs. images, etc. etc., but if you feel the need to use FamFamFam Silk icon’s in base64, look no further.

• The CSS file. It’s 2.1mb, so be careful.
• Examples

I use icons very liberally on all my projects; they’re classy and aid in usability. I typically start with a “.icon” class that configures the correct padding/background details for the element, followed by a “.icon-*” class, which sets the background-image property to that of the desired icon. For example, this CSS:

.icon { background-position:left; background-repeat:no-repeat; padding:3px 0 3px 19px }
.icon-pdf { background-image: url(/images/icons/pdf.png) }

Applied to this anchor element:

<a href="#" class="icon icon-pdf">Download PDF</a>

Produces:  Download PDF

Can you dig it? (more…)