Las tipografías de iconos son una buena alternativa para utilizar en vez de iconos en formato imagen para nuestros diseños web. Estos iconos podremos escalarlos simplemente modificando el tamaño de la fuente, cambiarlos de color, … de una forma rápida y sencilla.

Sólo es posible ver fuentes en los navegadores que tengamos instalados en nuestro ordenador por norma general. Para solucionar ésto podemos utilizar el atributo @font-face en el archivo css. Puedes ver el artículo de Insertar tipografías con css en página web sobre como se inserta este atributo.

También puede que te interesen otras fuentes de iconos de temáticas concretas:

 

Fuentes de iconos gratis

 

Dripicons

Disponibles en los formatos psd, ai, eps, pdf, svg y fuentes (ttf, eot)
fuentes_iconos

 

 

Linecons

Son 48 iconos en formato de tipografía web (HTML / CSS), pdf, ai (Adobe Illustrator), psd (Adobe Photoshop), png (tamaño original y 512 x 512px) y svg (archivo de vector universal).
fuentes-iconos-gratis

 

 

JustVector

Es una colección de 151 iconos en formato svg, ttf, eot.

fuentes-iconos-gratis-2

 

 

Typicons

Es una gran colección de 336 iconos en formato svg

fuentes-iconos-gratis-3

 

 

MFG Labs icon set

1324 pictogramas diferentes, incluidas las redes sociales más comunes. Están en formato svg, y fuente ttf, eot y woff.

 

 

Entypo

284 pictogramas disponibles en eps, pdf, psd y en tipografía de icono opentype, TrueType y @font-face.

Tipografías de iconos

 

 

Modern Pictograms

 

 

A Free Icon Web Font

 

 

Font Awesome

220 iconos.

 

 

PulsarJS @FontFace 73 Free IconFont

 

 

Raphaël Icon-Set via @font-face

116 iconos.

 

 

Fuentes de iconos del tiempo

Hay tipografías que en vez de letras están formadas por símbolos. Normalmente lo que se suele utilizar son imágenes, pero para evitar que se vean mal si las aumentamos de su tamaño original, se utilizan en su lugar las fuentes de iconos. Una buena alternativa a tener en cuenta.

 

Forecast font

Fuentes de iconos del tiempo

Para insertarlo en tu web primero tendrás que insertar en tu código css la llamada a la fuente utilizando el @font-face:

@font-face {
font-family: "iconvault";
src: url("iconvault_forecastfont.eot");
src: url("iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
url("iconvault_forecastfont.woff") format("woff"),
url("iconvault_forecastfont.ttf") format("truetype"),
url("iconvault_forecastfont.svg#iconvault") format("svg");
font-weight: normal;
font-style: normal;
}

Si lo que quieres insertar es el sol, un ejemplo sería primero en el archivo css:

/* -----Sun----- */.icon-sun::after {
content: «\f113»;
color: rgb(255, 165, 0);
position: absolute;}

y en el archivo html:

<ul>
<li class="icon-sun"></li>                        
<p>This is a simple Sunny icon.</p>
</ul>

Sencillo, ¿no?

 

 

Generador de fuentes de iconos

Sí, tú vas a poder escoger los iconos que van a llevar cada letra.

Glyphter es una herramienta online donde podrás crear gratis tu fuente de iconos personalizada de forma gratuita. Lo único es dar tu email al final del proceso para poder descargarte la fuente de iconos.

glyphter

 

Hay una gran variedad de iconos donde podrás escoger los que más te gusten.

Incluso una vez creados podrás modificarlos, cambiarlos de orientación, ponerlos en negativo o positivo, entre otras opciones.

Como puedes ver, es una herramienta muy completa que te permite autonomía para crear fácilmente tus propios iconos, sin la necesidad de encontrar aquellos que se adapten a lo que buscas. Tú tendrás la posibilidad de crear lo que necesites. No dependes de lo que hagan otros, sino de lo que hagas tú.

Pues nada, si te animas, ya sabes, vas a Glyphter y los creas. Así de fácil.

¿Te ha gustado esta herramienta? Guardar

 

Si te han gustado, me ayudarás a seguir creando artículos de este estilo si los compartes 🙂

Guardar