Fuentes de iconos para web

Seguro que en alguna web has visto iconos, puede que estos iconos sean imágenes, pero también es posible que sea un icono de fuente, estos iconos tienen la ventaja de poder transformarlos más fácilmente como si de texto se tratara.

GlyphIcons y IconMon, dos de las fuentes de iconos más utilizadas para web.

los iconos basados en caracteres fuente los cogemos desde el CSS, por ejemplo tenemos los iconos básicos del bootstrap (glyphicons), bootstrap es una ayuda programática para el diseño de una web adaptable ideado por los desarrolladores de Twitter (http://getbootstrap.com/), puedes ver el listado completo de iconos que utiliza bootstrap en: http://librosweb.es/bootstrap_3/capitulo_6/_iconos_glyphicons.html

Por supuesto también puedes descargarte los iconos sin necesidad de tener instalado bootstrap, en la página de glyphicons podemos descargarnos los iconos básicos de forma gratuita o comprar ampliaciones desde:

http://glyphicons.com/

En caso de necesitar alguno que no esté en glyphicons o querer crear tus propios iconos puedes visitar:

http://icomoon.io/app/#/select

Seleccionar los iconos necesarios (o crearlos) (si ya tenías iconos de estos recuerda incluir los iconos actuales) y click en Font y luego Download, esto descargará las fuentes de los iconos deseados, los descomprimimos y copiamos al directorio donde los deseemos usar (sustituyendo el actual, en caso de que ya tuvieras antiguos por ello hay que tener cuidado de haber seleccionado los iconos que ya usábamos) pero si ya tenemos iconos de glyphicons y se deja tal cual entrarán en conflicto, por lo que hace falta editar el archivo style.css de icomoon para sustituir en las clases de los nuevos iconos .iconmoon- en lugar de .icon-

Puedes ver los iconos actuales consultando el archivo demo.html desde tu navegador.

una vez instalado podrás usar los iconos simplemente usando su clase en una etiqueta HTML, como por ejemplo:

<span class="icon-facebook"></span>

o para una de iconmoon, si le hemos cambiado el nombre para usar las dos librerías:

<span class="iconmoon-blogger"></span>

y darle estilo mediante CSS como lo haríamos con cualquier elemento pudiendo personalizar cualquier característica como el color, color de fondo, tamaño etc…

De esta forma puedes ampliar la potencia de los iconos de glyphicons con la versatilidad de iconmoon, pero también puedes limitarte a una sola librería si se ajusta a lo que deseas.