Project Description


An atlas image (CSS Sprites) of all FamFamFam Silk icons with CSS.

Original icons (and license): http://www.famfamfam.com/lab/icons/silk/

Made with C# (code available)

Works with any group of icons (since you modify the image size @ code)

Usage:

Import the iconAtlas.css

Choose an icon (i.e. applicationsidelist.png)

Use it on your html:

<div style="icon icon_application_side_list"></div>


You're done =)

If you wondering why use this image:

All the FamFamFam Silk icons have 1.108.199 bytes (the CSS + Atlas have 610.334 bytes)

If you use all icons, your site will do 1714 requests (if a request lasts 10ms, which is VERY fast, you will spend 17 seconds to download them all).

The atlas will use 2 requests: 1 for css, 1 for image.

Check:

http://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS

http://css-tricks.com/css-sprites/

http://www.alistapart.com/articles/sprites

The code is very simple and crude, but I guess nobody will have issues adapting it for other users.

Just, please, link to this repo if you use it.

Last edited Nov 12, 2012 at 6:23 PM by JCKodel, version 4