FamFamFam flags sprite (with compass)

Creating css sprites is an amazing feature in compass. There is a tutorial to use compass to generate css sprites in the compass documentation.

The famfamfam icon flags are 247 icons — in GIF and PNG formats — representing most countries in the world as small pixel icons. These flag icons are available for free use for any purpose with no requirement for attribution. You can download them form here: http://www.famfamfam.com/lab/icons/flags/famfamfam_flag_icons.zip

As I need these icons for some of my projects and I want to use a css sprite to serve them, I’ve created a compass code snippet. All you have to do is download and place all the famfamfam png images in a folder called “flag” in the “images_dir” of the compass project and use or import the following code in your scss file:

1
2
3
4
5
6
7
8
9

@import "compass/utilities/sprites/base";
@import "flag/*.png";
$flags: sprite-map("flag/*.png");

.flag {
  display: inline-block;
  @include sprite-dimensions($flags, fr);
}
@include all-flag-sprites;

This is going to generate a class (“.flag-{image_name}” ex: “.flag-fr”) for every image with the correct background, so you can use it in your html:

1

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

If you want to remove (or add) a flag icon in your css sprite, you only have to remove it (or add it 🙂 ) in the “flag” folder.

And well, maybe you don’t want to use compass and you’re looking only for the css sprite with all the flags and the css code… you can download the result of this compass snippet from the github page of the project (in the “css_version” folder): https://github.com/tx2z/famfamfam_compass

Another option that I’ve found, if you only want to use the css sprite (without generating it with compass) and you don’t want to include all the famfamfam flags, visit this page http://flag-sprites.com where you can generate a css sprite with the famfamfam (an others) flags icons.