Sprite des drapeaux FamFamFam (avec Compass)

La création de sprites CSS est une fonctionnalité remarquable de Compass. La documentation de Compass propose un tutoriel pour générer des sprites CSS avec Compass.

Les icônes de drapeaux famfamfam sont 247 icônes, aux formats GIF et PNG, représentant la plupart des pays du monde sous forme de petites icônes en pixels. Ces icônes de drapeaux sont libres d’utilisation pour n’importe quel usage, sans obligation de mention de l’auteur. Vous pouvez les télécharger ici : http://www.famfamfam.com/lab/icons/flags/famfamfam_flag_icons.zip

Comme j’ai besoin de ces icônes pour certains de mes projets et que je veux utiliser un sprite CSS pour les servir, j’ai créé un extrait de code Compass. Il suffit de télécharger toutes les images PNG famfamfam, de les placer dans un dossier nommé « flag » dans le « images_dir » du projet Compass, puis d’utiliser ou d’importer le code suivant dans votre fichier 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;

Cela va générer une classe (« .flag-{nom_de_l_image} », par exemple « .flag-fr ») pour chaque image, avec le bon arrière-plan, et vous pouvez donc l’utiliser dans votre HTML :

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

Si vous voulez retirer (ou ajouter) une icône de drapeau dans votre sprite CSS, il vous suffit de la retirer (ou de l’ajouter 🙂) dans le dossier « flag ».

Et peut-être que vous ne voulez pas utiliser Compass et que vous cherchez seulement le sprite CSS avec tous les drapeaux et le code CSS… vous pouvez télécharger le résultat de cet extrait Compass depuis la page GitHub du projet (dans le dossier « css_version ») : https://github.com/tx2z/famfamfam_compass

Autre option que j’ai trouvée, si vous voulez seulement le sprite CSS (sans le générer avec Compass) et que vous ne voulez pas inclure tous les drapeaux famfamfam, visitez cette page http://flag-sprites.com, où vous pouvez générer un sprite CSS avec les icônes de drapeaux famfamfam (et d’autres).