Uno re los recursos más utilizados últimamente por los diseñadores y desarrolladores de páginas web, sin los icon-fonts o iconos CSS. De hecho en nuestra página web www.nuteco11.com, los utilizamos en diversas secciones de la página web.
Anteriormente (y aún en muchas páginas web que te puedes encontarar por internet) para utilizar iconos, tenias que utilizar o bien uno a uno con imágenes .png, .gif o .jpg, lo cual era un engorro a la hora de crearlos. O bién, tenias que utilizar «sprites», que no eran ni más ni menos que una imagen muy grande que contenía todos los iconos a la vez, y que podías ir seleccionándolos uno a uno por CSS.
Estas dos soluciones nunca fue muy de mi agrado, y de ahí que no utilizara mucho este recursos en los diseños web que hacíamos en esa época. Hasta que hace un tiempo, aparecieron los icon-fonts, que utilizan la misma tecnología que el resto de fuentes que podemos utilizar en cualquier web, y que en vez utilizar letras, utiliza iconos o símbolos.
Hay muchas formas de «llamarlos» o utiliziar estos iconos, pero como os he dicho antes, se utilizan mediante CSS así que podrias llamarlos así <span class=»icono-utilizado»></span> o bien dentro una lista así <li class=»nuestro-icono»></li>, etc.
Entre las ventajas de utilizar icon-fonts podemos encontrar:
- Reducimos el número de llamadas al servidor, ya que cargando el archivo de fuente, hemos cargado infinidad de iconos para poder utilizarlos. Antes, pàra cada uno de los icnonos que fueramos a utilziar en la página web, el navegador debía de hacer una llamada individual para cada uno de ellos. Ésto puede representar un ahorro en el tiempo de carga bastante importantede nuestra página web.
- Reducimos el peso de la página web. Un archivo «fuente» de icon-fonts puede pesar entre 5Kb o 50 Kb. Si tuviéramos que cargar todos los iconos individualmente el peso sería muchísismo mayor ( a no ser claro, que solo cargáramos uno o dos iconos.
- Libertad a la hora de utilizar distintos tamaños. Antes si queríamos utilizar distintos tamaños de un icono, debiamos subirlo en duplicado o bien redimensionar, lo cual podía deformar o no verse correctamente el icono. Con los icon-fonts puedes modificar los tamaños por CSS como si se tratara de una fuente de texto normal.
- Poder utilizar distintos colores. Al igual que deciamos antes con el tamaño, también podremos cambiar libremente el color de nuestros iconos como si se tratase de texto normal.
- Aplicarle estilos. Al igual que a los textos, a los iconos también podremos aplicar distintos estilos por CSS.
Vamos a repasar varios de los mejores recursos gratuitos de icon-fonts
BATCH
FONT AWESOME
Componente del podcast Concepto Sentido, Programador web en nutecoweb y beatlemaniaco.