¿Qué son las fuentes de iconos y por qué utilizarlas en una página web?
Si hay un recurso que utilizan todos los desarrolladores para crear un sitio web con un gran atractivo, ese es la iconografía, ya que puede dar un toque final perfecto al trabajo. Existen multitud de paquetes de iconos en formato gráfico, pero lo ideal es usar fuentes tipográficas, más conocidas como icon fonts o fuentes de iconos.
En este artículo, explicamos los motivos para utilizar las fuentes de iconos en una página web, sus ventajas e inconvenientes e incluimos algunos recursos útiles con fuentes de iconos.
¿Qué son los icon fonts?
Son los que se implementan por medio de una tipografía especial, y en lugar de los típicos caracteres que representan letras, lo hacen representando imágenes y que se colocarán como cualquiera texto, indicando la fuente de ese elemento.
Además, gracias a las CSS y los pseudoelementos de estilo como: after y :before, nos ahorraremos tener que escribir un caracter para representar un icono, de modo que en el contenido de la web colocaríamos un elemento con una clase para indicar que dentro debe colocarse un icono.
<span class='icono-deseado'></span>
Ventajas de usar las fuentes de iconos
- Evitar solicitudes al servidor. Si fueran imágenes sueltas, tendríamos que realizar una solicitud al servidor para descargar la imagen y esto puede ralentizar la carga de una página. Con las fuentes de iconos, van en un único archivo porque la tipografía se carga con CSS.
- Evitar el uso de sprites. Ahorramos la creación de sprites, así como su implementación, ya que las fuentes ya tienen «paquetizados» esos iconos.
- Ampliar/reducir los iconos. Al ser las fuentes tipográficas vectoriales, se podrá reducir o ampliar su tamaño sin pérdida de calidad, por lo que podrás adaptar los diseños a cualquier tipo de pantalla.
- Cambios de color. Nada de tener que repetir el icono en diferentes colores, simplemente las variaciones de color de estos los realizarás con el atributo color de CSS, asignando el RGB que necesites en cada lugar.
- Sombras u otros estilos CSS. Con el atributo text-shadow agregaremos una sombra a nuestro icono, aunque también seremos capaces de añadir otros efectos como resplandor, trazo, tachado, grosor, etc. si asignamos a las CSS el atributo correspondiente.
- Cambio radical de iconos. Puede que algún día quieras cambiar de iconos. Si fuese el caso, con solo alterar tus CSS sería suficiente.
Desventajas (que también las tienen)
- Iconos monocromáticos. Al ser fuentes, el icono va a ser siempre del mismo color, por lo que si queremos varios colores en un mismo icono, tendremos que hacer uso del formato gráfico.
- Iconos iguales en todos los sitios web. Existen menos fuentes de iconos que paquetes de imágenes, por lo que tus iconos pueden coincidir con otras páginas web.
Recursos con fuentes de icono
Unos cuantos sitios interesantes en el que podrás encontrar distintos icon fonts:
- Font-Awesome. Impresionante y completo framework para implementar iconos. Te ofrecen cientos de iconos y una serie de CSS ya listos para que los puedas incorporar. Los estilos están pensados para que los puedas usar directamente sobre textos, listas, botones… y para realizar algunas implementaciones más revolucionarias como apilar iconos, unos encima de otros y producir nuevos iconos compuestos.
- IcoMoon. Es un conjunto de herramientas para implementar iconos por medio de fuentes.
- Glyphicons. Es una librería de Bootstrap con un paquete de iconos listos para usar.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.