A la hora de utilizar iconos en nuestra web, muchas veces nos surge la duda de cómo es mejor que lo hagamos para optimizar la velocidad de carga, optimizar su visualización en todos los navegadores y resoluciones, ...
En nuestro caso solemos utilizar los sprites png, es decir, tener una sola imagen en formato png (principalmente con transparencia) con todos los iconos y su diferentes estados, con lo que a la hora de entrar en la web solo se tendrá que cargar esa imagen una vez y ya tendremos todos los iconos y sus estados, evitando, por ejemplo, los retardos cuando pasamos el ratón pon encima de un icono y se tiene que cargar su estado hover de otra imagen. Un ejemplo de un sprite.png sería el siguiente:
La manera de mostrar un icono u otro o cambiar sus estados se hace con css usando principalmente la propiedad background-position indicando las coordenadas en el sprite.png donde se encuentra el icono que queremos (también necesitaremos indicar el width y height).
Pero vamos a ver otra manera de tener iconos para nuestra web de una manera eficaz, rápida y moderna. Se trata de las fonts de iconos glyph o fuentes de texto con iconos.
Principalmente se usa con iconos glyph, flat o planos, que son cada día más usuales y hacia donde ha tendido el diseño web en los últimos años.
La gran mejora que tiene es su facilidad de uso y sobre todo que al tratarse de imágenes vectorizadas se verán siempre bien independientemente de las resoluciones, zooms, etc., con la que los veamos (en el caso de los iconos jpg, png, etc., al ser imágenes bitmaps, en cuanto hacemos zoom, por ejemplo, se pixelan y dan muy mala sensación).
A continuación pasamos a describir los pasos para crear y utilizar nuestra propia librería font de iconos glyph:
- Primero Paso:
Lo primero que tenemos que hacer es tener todos los iconos que queremos meter en la librería font (os aconsejamos que siempre utilicéis iconos propios o libres de derechos, pero eso ya es cosa de cada uno). Este primer paso consiste en convertir todos los iconos a formato SVG (Scalable Vector Graphics). Si tenemos iconos jpg, png, gif, ..., es decir, imágenes bitmaps, tendremos que vectorizarlas (recordad que estamos hablando principalmente de iconos flat o planos, aunque si vectorizáis iconos más complejos con, por ejemplo, degradados, ..., y el resultado os sirve, genial). La manera de vectorizar un icono es usando herramientas como, por ejemplo, Illustrator o Coreldraw, entre otros (buscad la manera de hacerlo).
Para convertirlos a SVG, en Illustrator, por ejemplo, tendríais que abrir el archivo bitmap, vectorizarlo, y a la hora de guardarlo tendréis que seleccionar "formato SVG (svg)", con lo que ya tendríamos ese icono disponible para añadir a nuestra font. - Segundo Paso:
Una vez tengamos todos los iconos que queremos en formato SVG, tendremos que utilizar alguna de las herramientas de generación de fonts. Para este ejemplo nosotros usaremos fontello.com por ser más sencillo y rápido, pero recomendamos también icomoon.io/app por todas las posibilidades que ofrecen.
En nuestro ejemplo, vamos a ver como insertar los iconos SVG que hemos preparado anteriormente, pero una vez estemos en la web de fontello, veremos que disponemos de unas cuantas librerías de iconos (la mayoría con licencia de uso libre) de las que podemos realizar una selección de iconos que queramos meter en nuestra font y que es la manera más rápida si no necesitamos algún icono propio o alguno que no encontremos en dichas librerías. Los pasos son:
- Ponemos un nombre a la librería: Podemos usar letras minúsculas, números, guión medio "-" y guión bajo "_". Nosotros escribimos "ejemplo":
- Zona donde arrastrar y soltar con el ratón nuestros iconos svg: Simplemente tenemos que arrastrar todos nuestros iconos svg a la zona siguiente:
Una vez soltemos los iconos nos aparecerán así:
- Seleccionaremos los iconos pinchando sobre cada uno:
- Pincharemos sobre el botón de descargar font "Download webfont" (nos indica en número de iconos que tendremos en la font, hasta que no seleccionemos al menos un icono no se habilitará), y nos descargará un archivo comprimido .zip con nombre del tipo fontello-a5faca4f.zip:
- Ponemos un nombre a la librería: Podemos usar letras minúsculas, números, guión medio "-" y guión bajo "_". Nosotros escribimos "ejemplo":
- Tercer Paso: Ya tenemos el archivo zip en nuestro ordenador y al descomprimirlo podemos ver que contiene:
- config.json - Archivo que tiene la configuración y que puedes importar de nuevo a fontello en cualquier momento para continuar con tu librería font.
- demo.html - Archivo html con una demo usando los iconos de la libería que has creado.
- readme.txt - Archivo con información sobre licencias y demás.
- Carpeta font - En esta carpeta encontraremos las fonts con el nombre que pusimos en fontello (nosotros pusimos "ejemplo") en los distintos formatos que necesitamos (.eot, .svg, .ttf y .woff) y que tendremos que copiar a nuestro proyecto.
- Carpeta css - Es esta otra carpeta tendremos diferentes tipos de css para todas las situaciones que necesitemos (animación, embeber los iconos en el css, para IE7, etc).
Para este ejemplo, solo tendremos que hacer lo siguiente:
- Copiar la carpeta font a nuestro proyecto.
- Añadir a nuestro css el código del css del archivo ejemplo.css que está en la carpeta css:
- Añadir las clases de css de los iconos que hemos generado en donde queramos dentro de nuestro código html (podéis ver el código del archivo demo.html para fijaros cómo lo usa):
Y después de todo esto ya podremos usar nuestros iconos glyph de una forma rápida y sencilla, cambiándoles de tamaño, colores, animaciones, etc., como si fueran texto.
Esperamos que os sirva de ayuda y si tenéis algún problema o sugerencia no dudéis en dejar vuestros comentarios.