Servicios de desarrollo

Icon Fonts o Pictogramas y sus multiple ventajas

Vamos a hablar de los iconos en el diseño web. Siempre usamos iconos en nuestras webs, por ejemplo: en esta misma pagina hay iconos sociales por todas partes y al final del post hay otros que no son iconos sociales pero si utiles para marcar algo, como un calendario para las fechas, una etiqueta para los tags, etc. Y existen muchas formas de agregarlos, vamos a listar las mas populares.

Imagenes sueltas

Esta es la peor opcion pero la mas sencilla(en algunas aspectos). Simplemente buscan los iconos sueltos en la web y lo agregan a su diseño como imagenes con la etiqueta img o con background-image mediante css.

Desventajas

  • Si quieres cambiar el tamaño, color y otras propiedades debes hacerlo con un editor de imagenes como GIMP o Photoshop.
  • Si quieres tener varios tamaños de la misma imagen sin perder calidad deberas crear varias imagenes.
  • Gastas una peticion HTTP por cada imagen mas el tiempo que tardan en bajarse.

Con Sprites

Esa es la manera en la que estaba haciendolo yo mismo antes de usar pictogramas. Basicamente sigue siendo usar imagenes pero pegandolas todas en una sola imagen. Con eso te ahorras las llamadas HTTP ya que haces solo una.

Desventajas

  • Deberas crear la imagen usando un editor de imagenes(Aunque hay algunas herramientas online que facilitan esto)
  • Si quieres agregar algun icono a la imagen debes saber en que posicion exacta se encuentra.
  • Es simplemente una molestia agregar las imagenes via css, ver la posicion y tamaño para cada imagen es aburrido y muchas veces no sale a la primera

Iconos realizados en puro CSS

Si buscan en la web algo como “pure css heart” les van a salir paginas que enseñan como armar la forma de un corazon solo usando css, jugando con formas, posiciones y colores. Esto era mas o menos bueno desde el punto de vista de la velocidad de carga pues no se hacia ninguna peticion extra ni se tenia que bajar ninguna imagen.

Desventajas

  • Los iconos realizados en esta forma son limitados(aunque cada semana veo algunos nuevos).
  • No es facil encontrar un ‘set’, es decir, iconos que mas o menos se parezcan y puedan ser usados en una web sin que parezca un circo.

Pictogramas o Icon Fonts

Ahora viene lo que nos interesa. Los pictogramas son basicamente fuentes de texto como lo son Arial, Times New Roman, etc; solo que en vez de letras son simbolos, iconos, figuras, etc.

La unica desventaja, si es que se le puede llamar asi, es que su instalacion no es tan simple como agregar un etiqueta ‘img’ pero igual es mucho mas facil que usar sprites.

Ventajas

  • Ahorras peticiones, al igual que con los sprites solo debes llamar a un archivo, el archivo de fuentes.
  • Si eres cuidadoso con el set de pictogramas que eliges tambien de puedes ahorrar bastante en el peso extra que debe ser descargado cada vez que abren tu web. Un monton de iconos pueden llegar a pesar entre 10Kb y 200Kb, una archivo de pictogramas entre 5Kb y 40Kb e incluyen muchos mas iconos.
  • Como son fuentes de texto puedes manipularlas de la misma manera que a un texto con CSS, y eso es bueno. Con un color: #00F; consigues un icono azul. Con font-size:2em; tienes un icono responsive y controlas su tamaño, etc etc. Esta es probablemente su mejor caracteristica.
  • Hay muchos sets en la web que puedes usar.

Como usarlos?

Primero buscas o creas tu set de pictogramas. La mayor parte de las veces seran 4 archivos con estas extensiones: .eot, .svg, .ttf, .woff

No se si son necesarios los 4 pero creo que no, igual eso no me interesa. Luego en tu css agregas un pequeño codigo

@font-face {
font-family: font-icon;
src: url('fonts/archivo.eot');
/* rutas a los otros archivos */
}
.icono {font-family: font-icon;}

Eso es todo. Ahora podrias usarlo en cualquier parte con un simple span.

<span class="icono">c</span>

Donde c pasara a ser el icono que represente en el archivo de fuentes.

Y hay otras maneras de agregarlos, eso ya lo buscan ustedes.

Donde los encuentro?

Googleando es la mejor manera. Yo les dejo algunos:

http://www.zurb.com/playground/foundation-icons
http://thedesignoffice.org/project/modern-pictograms/
http://www.heydonworks.com/article/a-free-icon-web-font
http://www.otlab.ru/8-font_notice.html

Mas ventajas?

Iba a poner mas set de iconos pero realmente son demasiados y no tiene sentido, usen google

Pero no me quiero ir sin compartir una web mas. Se llama Fontello y en ella tienen un monton de pictogramas pero pueden ir seleccionando cuales quieren y solo bajar aquellos que necesiten. Se ahorran todavia mas en el peso del archivo.

Y si en un futuro necesitan mas pues solo los vuelven a elegir y reemplazan el archivo sin mayores problemas.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

1
Comenta!

avatar
trackback

[…] habiamos hablados acerca de los Icons fonts o pictogramas y sus ventajas y desventajas. Basicamente son iconos que podemos usar en nuestras aplicaciones web […]