Tardé en conocer los font-icons, y más en utilizarlos. Ahora, en una especie de framework que utilizo para trabajar, también he incluido font-icons: una vieja versión de Font Awesome que sigue siendo útil.
¿Qué es un font-icon? Es una forma de mostrar imágenes usando ficheros de fuentes, lo que ocurre es que en lugar de tener por ejemplo la letra «a» tiene el icono «lupa».
¿Qué ventajas tiene?
- Poder cambiar el tamaño y color mediante CSS
- Tener un conjunto homogéneo de iconos
- Uso relativamente sencillo
¿Qué desventajas tiene? Aquí van algunas:
- En ocasiones es necesario configurar el servidor para que sirva los ficheros de fuentes de la forma adecuada (mimetype)
- No siempre hay un equilibrio entre los iconos disponibles y los que realmente se utilizan (y eso penaliza los tiempos de carga)
- Para que sea compatible con un amplio espectro de navegadores, suelen ser necesarios varios ficheros con diferentes formatos de fuentes (y también penaliza los tiempos de carga).
- No siempre se tienen en cuenta un aspecto clave, la accesibilidad.
¿Cómo hace un font-icon accesible?
Hay dos posibles casos de uso: iconos decorativos, e iconos importantes.
Y tenemos dos tipos de técnicas para hacerlos accesibles: usando HTML y usando WAI-ARIA.
Veamos, usando como ejemplo la versión actual de Font Awesome (5.10.2).
Una vez tenemos disponible las fuentes de iconos, mediante un código similar a:
<i class="fas fa-star"></i>
En el caso de que sea una imagen decorativa, usando el clásico HTML no haría falta nada más, pero con WAI-ARIA podemos añadir la propiedad aria-hidden para que lo oculte.
<i class="fas fa-star" aria-hidden></i>
En el caso de que se utilice un icono de fuente como si fuera una imagen y como tal necesite una alternativa textual, usando el viejo HTML nos bastaría con añadir un título descriptivo title.
Pero si aprovechamos las cracterísticas de WAI-ARIA podríamos usar role="img" para indicar que es una imagen, y aria-label para añadir esa alternativa textual necesaria.
El resultado final sería:
<i class="fas fa-star" role="img" aria-label="Favorito" title="Favorito"></i>
Optimizar los font-icons y usar sólo los iconos que necesito
Una recomendación final: como en cualquier utilidad, toca valorar si lo que nos ofrece es lo que necesitamos y cuánto nos cuesta para ver si merece o no la pena.
En el caso de los font-icons, tenemos por ejemplo, la posibilidad de usar centenares de iconos. ¿Necesitamos tantos?¿Qué coste tiene en velocidad de carga?
Si no necesitamos 400 iconos, solamente queremos 4, ¿para qué queremos tanto? Al final vamos a conseguir que la página se cargue más tarde y nos penaliza demasiado.
Para esos casos, nada como usar fontello que nos permite seleccionar para nuestro proyecto sólo los iconos que vamos a utilizar realmente. Y aunque no nos ofrezca la versatilidad de otras alternativas, puede ser justo lo que necesitamos.