Manuel-Bieh.de – Web-Development & Consulting

Deutsch English

Archiv:

Latest photoblog

photoblog

Blog » famfamfam silk icons css-sprite version

famfamfam silk icons css-sprite version

Many of you have probably used or at least heard of the famfamfam silk iconset in the past. 1000 free 16×16px icons for every purpose you can think of. Many websites or software packages are using it.

But 1000 icons means (in case you really use all of them) 1000 HTTP requests which is really a lot. And even if you’re using only ~100 icons, that’s still a lot of HTTP requesting.

For this reason I created a small CSS sprite version of the popular iconset including all 1000 icons in one single 299K png file + 1 stylesheet (56 KiB). (Filesize was reduced almost by half! (355K instead of 646K, that’s a reduction by 46%)).

Usage

Very simple. Just add a span to your markup, then add the class „icon“ and „iconname„.

Example:
<span class="icon attach"></span>

Download

Grab the file here:
http://www.manuel-bieh.de/publications/download/fff-sprites.zip

License

As the original iconset, the sprite is filed under Creative Commons Attributions 2.5

2 Kommentare zu “famfamfam silk icons css-sprite version”

  1. Grafik: GravatarCarsten Witt:
    Juli 11th, 2011 at 14:46

    Feine Sache, Manuel, dankeschön!
    Das PNG wiegt zwar komplett immer noch über 300KB, aber man kann die Dateigröße noch weiter reduzieren: Einfach aus dem PNG mit Photoshop alle Icons löschen, die man nicht braucht, so dass im Sprite große zusammenhängende, kompressionsfreundliche Flächen entstehen. (Wichtig ist nur, dass die verwendeten Icons dort stehen bleiben, wo sie waren, sonst funktioniert das CSS nicht mehr.)

    Grüße, Carsten.

  2. Grafik: GravatarManuel:
    Juli 11th, 2011 at 14:48

    Analog zum PNG kann man auch aus dem CSS die entsprechenden nicht benötigten Klassen rauslöschen.

Die Trackback-URL lautet