Estamos seguros que ha oído alguna vez que fuentes de iconos son muy fáciles de usar? Vamos a analizar esta herramienta de diseño, su metodología y su uso.
En primer lugar, eche un vistazo a los resultados de búsqueda en Google (en inglés): "icon font" - 720 solicitudes al mes, "download icons" - 1.000 solicitudes al mes (en Estados Unidos). Los números son casi iguales, hay diferencia entre ellas? En este artículo nos gustaría echar un vistazo a esta poderosa herramienta de diseño, examinar los pros y los contras del uso de fuentes de iconos, así como ofrecer los mejores representantes.
Bitmapped Iconos
No vamos a hablar de los iconos de vector, ya que svg es compatible sólo con IE 9 o superior...
Para diseñadores:
- Búsqueda rápida: vista previa de gráficos no requiere instalación de software adicional.
- Implementación rápida en un documento: sólo tiene que arrastrar el fichero a su documento en Photoshop o Gimp.
- Imagen ráster a escala es mala: no se puede aumentar iconos sin pérdida de calidad.
Para codificadores de HTML:
- No es fácil sacar los iconos desde PSD. Pero si lo hace, cada icono genera una petición al servidor. Para aumentar la velocidad de la carga tenemos que crear sprites - pegar esos pequeños elementos gráficos en una sola imagen.
- Animación de los iconos de mapa de bits es fácil, pero la calidad de la imagen se empeorará.
- En los dispositivos móviles, los iconos de mapa de bits no se aparecen muy bien, sobre todo, en los dispositivos con pantalla Retina.
Fuentes de Iconos
En esta fuente, cada carácter es icono. En la web ellas son utilizadas de la siguiente manera: es necesario conectar los archivos de fuentes a su página (igual como otras fuentes que tienen varios formatos), en CSS es necesario agregar reglas con selectores que son relevantes al contenido de los iconos, la clase:
1 |
icon-home |
puede corresponder al icono “home”.
Luego tiene que escribir en HTML:
1 |
<span class="icon-home"> </ span> |
y su icono home aparecerá en el lugar especificado. Se puede usarpseudo clases en lugar de HTML-elementos adicionales.
Pros
- Se puede escalar o animar los iconos sin problemas (fuentes de iconos son vectores.)
- Se puede usar grandes conjuntos de iconos.
- Estos iconos se ven muy bien en todas las pantallas.
- Los iconos pueden ser fácilmente añadidos a la página (interacción con HTML.)
- Se puede cambiar su color y tamaño usando CSS.
- Se puede facilmente cambiar iconos de sombra con la ayuda de CSS3.
Contras
- Para obtener una vista previa de los iconos tiene que abrir una página web o ejecutar un software específico.
- Sólo un color en el icono.
- Son más complicadas de usar en un editor de gráficos.
- Sin optimización la fuente puede contener una gran cantidad de iconos no utilizados (grandes tamaños de ficheros.)
Ahora vamos a echar un vistazo a esas fuentes de iconos. En esta entrada se encontrará una serie de recursos donde se puede descargar estas fuentes de forma gratuita.
Cada uno de estos recursos ofrece un conjunto diferente de iconos, por lo que se puede utilizar todos ellos. Dependiendo de su proyecto, necesitará varios conjuntos de iconos, elija los iconos que necesita y haga clic en el botón de descarga.
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *