Menú Cerrar

6 Fuentes de iconos CSS para “tunear” y acelerar tu página web

Como ya adelantamos en el artículo anterior una de las tendencias que marcarán el diseño web en el 2017 será el diseño plano flat design, y un elemento que acompaña esta tendencia de desarrollo son las fuentes de iconos CSS.

Hasta hace poco para mostrar una imagen o un icono en nuestra página web teníamos que subir el archivo jpg o png previamente editado con nuestro programa de diseño gráfico hasta conseguir que tanto el tamaño como el color de estos iconos fuesen como tal y como necesitábamos.

font-face logotipo

De un tiempo esta parte esto ha cambiado con la irrupción de las fuentes de iconos CSS desde las cuales podemos mostrar en nuestra página web por medio de código una interesante cantidad de iconos, haciendo con ello más rápido el proceso de diseño y acelerando un 14% la carga de estas imágenes al disminuir su peso.

Todas estas ventajas han estandarizado el uso de las fuentes de iconos CSS a la hora de desarrollar páginas web y tiendas online, hasta el punto de que muchas plantillas premium y plugin para WordPress ya traen algunas de estas librerías por defecto.

El uso de estas tipografías de iconos añade entre otras la ventaja de poder cambiar el color y el tamaño de los iconos por medio de CSS en lugar de tener que editar y volver a subir las imágenes hasta encontrar el color y el tamaño deseado, también podemos añadir efectos como sombras o rotaciones y conseguir una homogeneidad visual en la página y un toque de distinción único por la cantidad de iconos que podemos encontrar y su gran maleabilidad.

En este artículo os presentamos una selección de fuentes de iconos gratuitas para hacer más atractiva y moderna vuestra página web o tienda online.

Font awesome

font-awesome

Posiblemente la fuente de iconos CSS más conocida, fue diseñada para funcionar perfectamente con Twitter Bootstrap y una de las responsables de su uso generalizado, es un proyecto activo que se va actualizando con nuevos iconos periodicamente.

Icons8

Increíble fuente de iconos cuya característica más interesante es que no necesita que añadamos su origen en el encabezado de nuestra página web, por lo que simplemente tendremos que pegar el código que obtendremos en su página en el lugar en el que queramos que se muestre el icono.

Fontello

fontello generador de iconos

Fontello realmente es una herramienta online que nos permite hacer nuestros propios iconos cogiendo como base los iconos de librerías como Entypo, Font Awesome, Iconic y Brandico.

Typicons

typicons iconos

Otra impresionante librería con la que si tendremos que utilizar la regla CSS @font-face tras subir sus archivos a nuestro hosting para que se muestren los iconos en nuestra página web, conocer la regla@font-face  es imprescindible para saber como funcionan este tipo de fuentes.

Foundation Icon Fonts 3

foundation-icon-fonts-3

Desarrollada por la empresa californiana ZURB ubicada en Campbell, en el corazón de Silicon Valley, Foundation Icon Fonts 3 es la tercera versión de esta increíble galería que hereda la calidad de los desarrollos de la compañía.

Linearicons Free

lineari-iconos

Interesante y elegante colección de iconos que cuenta con versión gratuita con 170 iconos y otra versión de pago con 1001 iconos editables y hechos a mano, otra de las librerías de iconos CSS imprescindibles.

Todas estas fuentes de iconos CSS ademas ser elegantes dan un toque a nuestra página web limpio y dinámico, por lo que vale la pena probarlas e investigar sus posibilidades.

Gracias a su uso conseguiremos un diseño web único y muy personal que se verá perfecto en cualquier pantalla, además de poder jugar con sus colores, sombras y todas las posibilidades que nos ofrece el código CSS, por lo que el único limite, es nuestra creatividad e imaginación.

El futuro del diseño web esta aquí. ¡atrévete a probarlo!

Deja un comentario

×
Hola! 👋 ¿Dime en qué puedo ayudarte?