jesus.perezpaz.es

Iconos de banderas FamFamFam (con compass)

famfamfam-compass

Una de las opciones que más me gustan de compass es la generación automática de sprites css. En la documentación de compass hay un tutorial de cómo usar compass para generar sprites css.

Los iconos de banderas famfamfam son 247 iconos — en GIF y PNG — que representan la mayoría de paises del mundo. Estas banderas están disponibles para usar gratuitamente para cualquier propósito sin ningún requerimiento de atribución. Puedes descargarlas de aquí: http://www.famfamfam.com/lab/icons/flags/famfamfam_flag_icons.zip

Uso estos iconos para algunos de mis proyectos y me gusta usarlos mediante un sprite css. He creado un snippet (recorte de código) para compass para poder utilizarlos fácilmente. Todo lo que hay que hacer es descargar los iconos y meter todas las imágenes en formato PNG en una carpeta llamada “flag” en el directorio de imágenes (“images_dir”) que tengas configurado en tu proyecto de compass, y usar o importar el siguiente código en tu archivo scss:

Esto va a generar una clase (“.flag-{nombre_de_la_imagen}” ej: “.flag-fr”) para cada imagen con el background correcto, para que puedas usarlas en tu html:

Si quieres quitar (o añadir) una bandera en tu sprite css tan sólo tiene que eliminarla (o añadirla 🙂 ) en la carpeta “flag”.

Y bueno, quizás no quieres usar compass y estás buscando sólo el sprite css con todas las banderas y el código css… Puedes descargar el resultado en css desde la página github del proyecto (se encuentra en la carpeta “css_version”): https://github.com/tx2z/famfamfam_compass

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

Ir a la portada → ← Volver artás

Comentarios

0 comentarios

Aún no hay comentatios. ¿Por qué no añades uno?

Dejar un comentario

Tu dirección de email no será publicada