Gentleface icons CSS sprites demo

To learn more about "CSS sprites" conception, see Sprite (computer graphics) [wikipedia].

The sprites were generated with the help of website-performance.org and are CSS3 valid.

The minified version of the CSS file of the package was processed with the YUI Compressor.

The PNG sprites are optimized with Smush.it^TM.

Global sprite overview

Sprites usage

To use the sprites, just include the CSS definition file in your HTML document:

	<link rel="stylesheet" href="path/to/src/gentleface-sprites.css" />
	// or the minified version (light weight):
	<link rel="stylesheet" href="path/to/src/gentleface-sprites.min.css" />

The sprites are used adding specific CSS classes to a DOM entity such as a span. Each item of the sprites is accessible by using one of the global CSS classes gentleface-XX where "XX" is an icon size in 16, 24, 32 or 48; each item will be an empty square of XX by XX pixels with the wanted image as background. This background is defined adding the name of the item as a CSS class. For example, to construct an item using the "print" image, the CSS class to use will be gentleface-XX print.

As the images are proposed in black or white, the color can be added as a class.

A special reset class can be used to reset some basic CSS definitions for an item, such as its border (none), its margins and paddings (0).

Full synopsis

A complete usage synopsis of the sprites could be:

    <span class="gentleface[-16 | 24 | 32 | 48] [reset] [black | white] icon_name"></span>

Defaults

A default class is defined to use the "black" set of 16 by 16 pixels icons. Using the standalone class gentleface will be the same as gentleface-16 black.

Effects

Some special classes are designed to add some effects on certain icons, such as a "link hover" effect.

• hover-COLOR: classes for links to switch the icon color on hover and focus link event,
• active-COLOR: classes for any DOM object to switch the icon color if the object has class active,

Examples

    // for a black (default) version of icon 'balance' in size 16x16 (default)
    <span class="gentleface balance"></span>
    // or
    <span class="gentleface-16 app_window_shell"></span>

    // for a black (default) version of icon 'app_window_shell' in size 24x24
    <span class="gentleface-24 app_window_shell"></span>
    // or
    <span class="gentleface-24 black app_window_shell"></span>

    // for a white version of icon 'rss' in size 32x32
    <span class="gentleface-32 white rss"></span>

    // using the same with the 'reset' feature
    <span class="gentleface-32 reset white rss"></span>

    // usage of the 'hover-COLOR' feature
    <a ...><span class="gentleface-48 reset hover-white rss"></span></a>
    <a ...><span class="gentleface-32 reset white hover-black rss"></span></a>

    // usage of the 'active-COLOR' feature
    <span><span class="gentleface-24 reset active-white shield"></span></span>
    <span class="active"><span class="gentleface-24 reset active-white shield"></span></span>

Results:

 | 

Full icons review

This table presents each icon separatly. To see the CSS class used, put you mouse hover an item. Words between brackets are optional.