27 Feb 2015

Iconos sin imagenes con FontAwesome

Iconos sin imagenes con FontAwesome

Cualquier interfaz resulta más llamativa con elementos gráficos en vez de texto, y eso no es un secreto. Pero al momento de implementarlos en nuestras aplicaciones web hay que tener en cuenta su peso (para la velocidad de carga) y que sean escalables (para reutilizarlos y adaptarlos a distintas pantallas).

En vez de crear imágenes de distintos tamaños lo mejor es utilizar imágenes vectoriales que puedan cumplir con este requerimiento de escalabilidad.

Para ello podemos utilizar una librería llamada FontAwesome.

Como su nombre te indica, en realidad se tratan de imágenes convertidas a fuentes, por lo que su integración a nuestro CSS, resulta simple y rápida.

Para utilizarla, hay que descargar la librería desde http://fortawesome.github.io/Font-Awesome/icons/ y copiarla en nuestra carpeta de CSS.

Una vez en nuestro repositorio hay que utilizarla tal y como lo hacemos con cualquier otro tipo de fuente, es decir, desde nuestro CSS invocamos el font con:

@import url(‘font-awesome/css/font-awesome.min.css’);

Y en nuestro html, dónde queramos incluir el icono, anexar un tag i que haga referencia al icono que deseemos:

<i class="fa fa-bar-chart"></i>

que mostraría


Así tenemos iconos que requieren muy poco tiempo de carga y se mostrarán de forma nítida en nuestras interfaces.

Artículos relacionados