¿Qué es FontAwesome y cómo usarlo en mi sitio web?

¿Qué es FontAwesome y cómo usarlo en mi sitio web?

FontAwesome es un proyecto magnífico que sirve para meter iconos en tu web, básicamente.

En la web que hagas vas a querer usar iconos sí o sí.

Pues antes había que crear el icono en una imagen y subirlo al servidor e integrarlo como una imagen normal.

Eso es un coñazo como una casa.

  • Porque es difícil encontrar iconos bonitos sin copyright.
  • Porque más difícil es encontrar iconos distintos que tengan el mismo estilo.
  • Porque incluir imágenes a mano es una pérdida de tiempo.

Pues bienvenido sea FontAwesome.

¿Qué es FontAwesome?

Una serie de iconos que puedes usar directamente con un elemento html básico.

  • Así, podrás ducharte cuando quieras.
  • Dar vueltas como una lavadora.
  • …o incluso irte volando en una nave espacial.

¡Qué bien!

¿Cómo integro FontAwesome en mi web?

Hay muchas formas, pero la más cómoda es incluyendo la hoja de estilos desde un servidor oficial externo.

Básicamente consiste en meter esto dentro de la sección head de tu documento HTML.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Lo normal es que quieras actualizarlo cuando aparezca una versión nueva, pero tampoco es que sea muy importante.

¿Cómo muestro los iconos en mi web?

Si integrarlo es fácil, más fácil es usarlo.

Basta con que añadas la etiqueta:

<i class="fa fa-icono"></i>

Para que el icono se muestre.

Naturalmente, tendrás que cambiar la palabra icono por el nombre del icono que quieras mostrar.

Si quieres mostrar el icono de la casita para un botón de inicio, usarías fa-home.

¡Qué bien!

¿Qué iconos me ofrece FontAwesome?

Pues muchos.

Puedes ver la lista completa aquí.