Sprite de banderas FamFamFam (con Compass)

Crear sprites CSS es una función estupenda de Compass. La documentación de Compass incluye un tutorial para generar sprites CSS con Compass.

Los iconos de banderas de famfamfam son 247 iconos —en formatos GIF y PNG— que representan a la mayoría de los países del mundo como pequeños iconos de píxeles. Estos iconos de banderas son de uso libre para cualquier fin y sin obligación de atribución. Puedes descargarlos aquí: http://www.famfamfam.com/lab/icons/flags/famfamfam_flag_icons.zip

Como necesito estos iconos para algunos de mis proyectos y quiero servirlos con un sprite CSS, he creado un fragmento de código de Compass. Solo tienes que descargar todas las imágenes PNG de famfamfam, colocarlas en una carpeta llamada «flag» dentro del «images_dir» del proyecto de Compass y usar o importar el código siguiente en tu archivo scss:

1@import "compass/utilities/sprites/base";
2@import "flag/*.png";
3$flags: sprite-map("flag/*.png");
4
5.flag {
6  display: inline-block;
7  @include sprite-dimensions($flags, fr);
8}
9@include all-flag-sprites;

Esto genera una clase («.flag-{image_name}», por ejemplo «.flag-fr») para cada imagen con el fondo correcto, así que puedes usarla en tu HTML:

1<div class="flag flag-fr"></div>

Si quieres quitar (o añadir) un icono de bandera en tu sprite CSS, solo tienes que quitarlo de (o añadirlo a 🙂 ) la carpeta «flag».

Y bueno, quizá no quieras usar Compass y solo busques el sprite CSS con todas las banderas y el código CSS… puedes descargar el resultado de este fragmento de Compass desde la página de GitHub del proyecto (en la carpeta «css_version»): https://github.com/tx2z/famfamfam_compass

Otra opción que he encontrado, si solo quieres usar el sprite CSS (sin generarlo con Compass) y no quieres incluir todas las banderas de famfamfam, es visitar esta página http://flag-sprites.com, donde puedes generar un sprite CSS con los iconos de banderas de famfamfam (y de otros).