Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Usando pictografías en lugar de imágenes II

Usando pictografías en lugar de imágenes II 28.JAN.14

Gianfranco Lemmo
Fundador WebBizarro

Hace unos días explicamos que son las pictografías y un poco como se come este asunto, donde indicamos que es una pictografía y los beneficios de usarlas en la web.

Les muestro 4 sitios donde pueden encontrar pictografías:

Raphaël

Esta pictografía es una de las más sencillas de usar, tiene una variedad limitada pero sus iconos podemos decir que son los necesarios para comenzar y en la mayoría de los casos los que más utilizamos.

El CSS necesario para añadir esta tipografía es el mismo que usaremos para las demás, primero importamos la fuente tipográfica y posteriormente establecemos el font-family de un elemento.

@font-face {
    font-family:iconos-raphael;
    src:url('fonts/iconos-raphael.ttf');
}
span.icono {
    font-family:iconos-raphael;
}

Con esté código en nuestro CSS cualquier elemento <span> con la clase icono se usaría el icono de la pictografía.

<div>
    <span class="icono">M<span>
    Contacto
</div>

De esta forma tendríamos un sobre con la palabra Contacto tan sencillo como importar una tipografía.

Entypo

Por otro lado tenemos Entypo Que es una tipografía un poco más amplia y se centra en iconos para aplicaciones de distintos tipos, además de tener otra pictografía con iconos sociales, lo que lo hace una buena opción a la hora de crear una app.

A diferencia de la anterior pictografía, Entypo relaciona los iconos con códigos numéricos que tenemos que copiar de su propia página, como sería: &#10150; o &#59155;. Pero en resumidas cuentas, el proceso es igual.

Flaticon

Hace unas semanas hablamos del mayor catálogo de iconos de internet con mas de 20.000 iconos disponibles, de los cuales podemos descargar los que realmente queramos, sin la necesidad de descargar todo un pack y nos incorpora un archivo CSS que debemos de usar para utilizar más cómodamente la tipografía y un pequeño manual junto a la descarga del la tipografía.

Por lo que se convierte, sin duda, en la opción más versátil de las tres.

Icomoon

Y por último tenemos Icomoon, que es muy similar a Flaticon, aunque es más reducido. El funcionamiento es además similar, pudiendo descargar los iconos que queramos sin necesidad de descargar todos.

Pero tiene una peculiaridad, y es que nos permite subir vectores en SVG y podemos así crear nuestra propia pictografía online sin necesidad de grandes conocimientos en la creación de fuentes tipográficas.

—> Usando pictografías en lugar de imágenes I.