Trabajando con Icon Fonts

Ya no existen Aplicaciones o Sitios Web profesionales que no posean un set de íconos que acompañen a las acciones más comunes o trascendentes dentro de los mismos. Son la mejor forma de sintetizar lo que se espera de una interacción determinada por parte de un usuario en nuestra aplicación, además de servir para embellecer el diseño propuesto. Por último, y no menos importante, ayudan (y mucho) a mejorar la usabilidad de nuestros entornos, utilizando representaciones gráficas ya globalmente estandarizadas que hacen a nuestras aplicaciones más intuitivas y fáciles de aprender. Todo esto hace que trabajar con íconos sea hoy en día imprescindible.

Cuando únicamente se dispone de “mapas de bits” para llevar estos íconos a la pantalla del usuario, -y sugiriendo que no se pretende tener más de una imagen y programar una lógica que elija cuál mostrar-, sucede que, a la hora de diseñar aplicaciones responsive, empiezan a aparecer las dudas acerca de cuál es el tamaño óptimo de esa imagen para todas las resoluciones a las que está dirigido el diseño. De ello resulta que para resoluciones superiores necesito una imagen de mayor tamaño, que consecuentemente va a pesar más, que no es óptima para un dispositivo móvil; a su vez, este dispositivo móvil no necesita una imagen tan grande, y puede que necesite conectarse a conexiones más lentas en las que el peso total de la aplicación incide sobre el rendimiento. Sucede lo mismo a la inversa: una imagen óptima para un dispositivo móvil, pierde definición en un monitor de escritorio, por poner un ejemplo. Y esto solamente sin sumar cómo se renderizan algunas imágenes en pantallas de distinta densidad de píxeles, o con píxeles que no son cuadrados u otros detalles derivados del “Pixel Ratio”, etc.
Por ende, la mejor opción para resolver buena parte de la base del diseño de nuestra aplicación, es llevar nuestros iconos embebidos en Icon Fonts, lo que nos garantiza compatibilidad con la mayoría de los dispositivos móviles y navegadores de escritorio. Los Icon Fonts son básicamente fuentes de texto como los Arial, Times New Roman, etc. Sólo que en lugar de letras se trata de símbolos. Esto conlleva una serie de ventajas:
Los Icon fonts son bastante más livianos que los iconos generados como imágenes.
Como son fuentes de texto se pueden manipular de la misma manera que a un texto con CSS. 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 característica.
No importa el tamaño; nunca se pixela.
Pero mejor que hablar de sus prestaciones, es mostrarlas: