FamFamFam flag icons CSS sprite 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

Sprite usage

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

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

The sprite is used adding specific CSS classes to a DOM entity such as a span. Each item of the sprite is accessible by using one of the global CSS classe flag-icon; each item will be an empty square of 16 pixels by 11 pixels with the wanted flag as background. This background is defined adding the name of the item as a CSS class. For example, to construct an item using the "us" flag, the CSS class to use will be flag-icon us.

The flag names (and associated classes) follows the ISO 3166-1 alpha-2 country codes.

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).

A complete usage synopsis of the sprites could be:

    <span class="flag-icon [reset] country_code"></span>