Todos los desarrolladores web solemos utilizar todo tipo de recursos para darle un mejor aspecto a nuestro sitio y en este caso, son los iconos los elegidos. Hay muchos, incontables números de paquetes de iconos que podemos utilizar para darle un lindo toque a nuestros trabajos. Además, esto nos 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 indicaremos que la fuente de ese elemento será la tipografía con el pack de iconos ansiados.
Aparte de lo ya mencionado, podemos utilizar también CSS y los psudoelementos de estilos ya sean after y before y así ahorrarnos el tiempo en escribir un carácter que represente nuestro icono, de forma que el contenido de nuestro sitio solo pondríamos un componente con una clase para señalar que adentro debe ponerse un icono.
<span class-“icono-deseado”></span>
Sería algo así y nos 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, dándonos mejor rendimiento en nuestro sitio.
- 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.
- Cambiar el color: Si queremos hacer variaciones en nuestros iconos en cuanto al cambio del color, con el atributo de “color” de CSS, asignando el RGB que necesiten en cada lugar podrán hacerlo.
- Cambiar los iconos: Si un día queremos 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 tu web.
Por ahora, lo dejaremos hasta aquí para no agobiaros de información dividiendo el tema en dos partes, en la siguiente os diré las desventajas y dejaré algunos sitios para los recursos.
Compartan con vuestros amigos en Facebook y Twitter.
Os invito a dejar vuestra opinión en la caja de comentarios.
