Iconos sociales con @font-face

Stackicons es un proyecto nuevo y que seguramente muchos terminaremos utilizando en algún momento. Se trata de una colección de iconos de sitios web populares en formato de Web Font.

Utilizar iconos es formato web font brinda grandes ventajas a diferencia de los formatos convencionales de imágenes, una de ellas es reducir el peso y las solicitudes de archivos a nuestro servidor, en especial si necesitamos emplear un numero elevado de iconos.

Al emplear un formato SVG también eliminamos los posibles problemas que encontramos a escalar una imagen según las distintas resoluciones. Además su implementación es muy sencilla, tan solo necesitamos utilizar unas pocas clases para mostrar los iconos.

iconos populares web font

En total este proyecto cuenta con 60 iconos diferentes, prácticamente contiene todos los logos de los sitios más populares de Internet.

El dato curioso: en la captura de pantalla que coloque en esta entrada se puede ver que los iconos en algunos casos contienen más de un color, algo que no suele pasar con las web fonts que emplean un solo color plano. Para lograrlo el autor de este magnífico recurso combinó varias webfonts a modo de capas, una idea muy buena y que al menos yo veo por primera vez.

Un detalle interesante es que todos los iconos pueden cambiar su contenedor y forma de manera sencilla. En total tenemos 6 posibilidades: solo logo, fondo cuadrado, 3 tipos de cuadrados con bordes redondeados y finalmente con fondo circular.

Les recomiendo visitar el sitio del proyecto, además de ver una demostración online el autor promueve dos o tres enlaces a CodePen para que hagamos nuestras propias pruebas.

StackIcon es un proyecto open source, 100% gratuito.

Web: Stackicons

Categorizado en: