[Front End] Creación de ícono personalizado – ¡Estilo Fontawesome!
¿Qué se te viene a la mente al ver estos íconos?
Seguramente, ya los has visto en alguna página web y reconoces su significado sin importar si tu idioma es el español, inglés o chino, debido a que los íconos se han convertido en un lenguaje universal. Con un simple ícono, representación visual simbólica de un objeto u concepto, nos ahorramos explicaciones largas e innecesarias. Además, si te encuentras en un sitio web, los íconos te facilitan la navegación [5][7].
Ejemplo: El famoso ícono de la “lupa” nos indica que iniciaremos una búsqueda.
En LiOnline buscamos diseñar sitios web enfocados en obtener una positiva experiencia del usuario y los íconos nos ayudan en ello pues hacen que las interfaces sean más intuitivas y amigables es decir de fácil entendimiento por parte de los usuarios.
El sitio web de nuestro cliente BYC Grupo Inmobiliario, empresa de venta/alquiler de propiedades, cuenta con íconos que representan las características que posee una propiedad:
- Número de habitaciones – ícono de una cama
- Número de baños – ícono de una ducha
- Cantidad de fotos disponibles para esa propiedad – ícono de imagen
- Metros cuadrados – ícono de un plano.
Imagen 1 – Sitio web de nuestro cliente ByC
Imagen 2 – Propiedad en Venta de ByC
Luego de haber entendido qué son los íconos y porqué son importantes, nos moveremos a ¿cómo los implementamos (creamos) en un sitio web. Antes del 2014, los íconos estaban en *.jpg, *.png u otro archivo de imagen. Siguiendo el ejemplo de ByC, entonces podíamos tener un archivo “cama.png”, o “ducha.png”. ¿Qué problemas nos trae trabajar los íconos como archivo de imagen?
- La solicitud de mútiples imágenes al servidor, hace que el sitio web se cargue lentamente.
- Las imágenes pierden resolución/nitidez al aumentar su tamaño
- Al tener un ícono en imagen, no es posible modificar, por ejemplo, el color. Había que crear la misma imagen pero con diferente versión de color.
- No se pueden animarse las imágenes fácilmente.
Por tanto, definitivamente utilizar un archivo de imagen para un ícono no era una buena solución [1][4]
Veámoslo de forma gráfica: En la imagen 3, tenemos un ícono de “casa” (no es un archivo imagen) y un ícono de “regla” (archivo tasacion.png), con un zoom adecuado ambos se ven con buena resolución. ¡Ok!
Imagen 3 – Íconos para representar los servicios de ByC
Sin embargo, hagamos un zoom ++++, ¿qué ha sucedido? en la imagen 4, vemos que la “casa” ha mantenido su resolución a pesar de haber aumentado de tamaño, algo que no sucede con la “regla” la cual vemos borrosa.
Imagen 4- Ícono en imagen vs Ícono en icon-font
Por suerte, hoy tenemos una solución para eso: “Icon Font”, el ícono de la “casa” es de ese tipo.
¿Qué es un Icon Font? ¿Cómo lo utilizo? ¿Puedo crear mi propio ícono?, ¡aquí responderemos esas preguntas!
