Los iconos a través de la tipografía

Todos los desarrolladores web suelen utilizar todo tipo de recursos para darle un mejor aspecto al sitio web y en este caso, son los iconos los elegidos. Hay muchos, incontables números de paquetes de iconos que se pueden utilizar para darle un lindo toque a cada trabajo. Además, esto les sería de utilidad para las personas que se desenvuelven mejor en la programación y no en el diseño.

En ingles se le conoce como icon-fonts y se emplean por medio de una tipografía especial en donde en vez de utilizar caracteres que representan letras, se utilizan caracteres que representan imágenes de distintas cosas. Para utilizar los icon-fonts, deben de poner un icono con una etiqueta IMG colocando así un elemento cualquiera con un texto en donde se indicará que la fuente de ese elemento será la tipografía con el pack de iconos ansiados.

Aparte de lo ya mencionado, se puede utilizar también CSS y los psudoelementos de estilos ya sean after y before y así se ahorrará el tiempo en escribir un carácter que represente el icono, de forma que el contenido de vuestro sitio solo pondrían un componente con una clase para señalar que adentro debe ponerse un icono.

<span class-“icono-deseado”></span>

Sería algo así y les ayudaría a representar el icono memorizando sólo los nombres de clases y no los caracteres.

Algunas de las ventajas de este método son interesantes, dando así un mejor rendimiento en la sitio.

  1. Evitarán el uso de sprites: La creación de estos son tediosos y laboriosos, incluyendo su implementación. Pero las fuentes que ya tienen predeterminado los iconos, lo que previene el gastar tiempo en hacer sprites.
  2. Cambiar el color: Si se quiere hacer variaciones en vuestros iconos con referencia al cambio del color, con el atributo de “color” de CSS, asignando el RGB que requieran en cada lugar podrán hacerlo.
  3. Cambiar los iconos: Si un día se desea modificar cambiando los iconos, puede ser posible con solo cambiar la tipografía de vuestros iconos y así, automáticamente, cambiaría el aspecto de la web.

De esta manera se lograría un mejor visto y acabado en la página web para los potenciales clientes que visitarían la empresa o negocio.