Font Awesome ¿Qué es y cómo se usa?

Font Awesome ¿Qué es y cómo se usa?

font-awesom-icon

Font Awesom es un framework de iconos vectoriales y estilos css. Pero… ¿para qué sirve? Este framework es utilizado para sustituir imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. Para ello utiliza una librería de mas de 400 iconos transformadas en fuentes.

Aquí os mostramos algunos de ellos:

Además de que nos permite reducir significativamente el uso de imágenes para iconos (lo cual se traduce en mejorar la velocidad de nuestra web), nos brinda las siguientes características:

Más de 400 iconos

En la versión actual existen más de 400 iconos disponibles, pero esto va en aumento y es actualizado con nuevos iconos permanentemente.

No se necesita del uso de javascript

Compatible con la mayoría de dispositivos y navegadores ya que no requiere de Javascript ni otras librerías para su uso, solo el soporte de @font-face por parte de los navegadores.

Escalabilidad

Al tratarse de iconos vectoriales nos permite escalar nuestros iconos sin problemas de resolución.

Licencia libre

Font Awesome es totalmente libre para uso comercial, puedes comprobar aquí su licencia.

Control CSS

Fácil estilos gráficos de los iconos mediante estilos css:  color, size, shadow, y otras propiedades, todo desde css.

PERFECCIÓN en  Retina Displays

Al tratarse de vectores nos permite tener perfecta resolución en pantallas de alta resolución.

Compatibilidad con otros frameworks

Originariamente fue diseñado para ser usado con bootstrap, pero puede ser usado con cualquier otro framework y/o librería.

Uso en Desktop

Se puede instalar en nuestro escritorio, instalando FontAwesome.otf, y estableciéndolo como fuente de la aplicación. Esto nos permite usar estos iconos de manera directa en bocetos en programas de nuestro ordenador.

Puedes visualizar el listado de iconos y su código unicode desde aquí.

¿Como se usa?

1- Incluye el siguiente código en el <head> de tu página:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2 –  Ten a mano la lista de iconos que puedes utilizar.

3 – Incorpora los iconos a tu diseños mediante el uso de clases en etiquetas como en este ejemplo:

Font Awesome Examples

4 – Dale el estilo de diseño que quieras mediante estilos css.

Ejemplo: Cambiar el color

Font Awesome Examples-colors

¡Y listo!

Aquí tienes una lista de ejemplos, que te servirán como guía para que conozcas en profundidad su uso.

Solo queda que nos cuentes tu experiencia y resultado usando este práctico framework.

También te puede interesar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *