Cómo usar los íconos Font Awesome (fa)

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más.

font-awesome

La imagen anterior muestra una parte de la colección de íconos Font Awesome.

Unas de las características especiales de este conjunto de íconos es:

  • Al no ser gráficos y ser representados mediante una fuente, el peso en mucho menor.
  • Pueden utilizarse distintos colores para su representación
  • Es posible utilizar varios tamaños sin que estos se deformen

Prácticamente para usar estos íconos es necesario:

  • del proyecto de Font-Awesome es necesario descargar a la carpeta de tu proyecto la carpeta:
    • CSS que incluye los siguientes archivos:
      • font-awesome.css
      • font-awesome.css.map
      • font-awesome.min.css
    • fonts que incluye los siguientes archivos
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2



Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir el siguiente código en las páginas desde donde se utilizarán los íconos:

La referencia a los archivos CSS:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

y ¡listo!, esto es lo que necesitas.

Ahora, para llamar los íconos en tu página web se hace através del artributo class de HTML y donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span class=”fa fa-folder-open”></span> directorio<br/>
<span class=”fa fa-folder-open fa-2x”></span> directorio al doble<br/>
<span class=”fa fa-folder-open fa-3x”></span> directorio al triple<br />
<span class=”fa fa-spinner fa-2x”></span>cambio de ícono <br/>
<span class=”fa fa-spinner fa-2x” style=”color:red”></span>Al ser una fuente puedes indicar el color que necesitas<br/>

el resultado es:

font-awesome-ejemplo

Utilizar una etiqueta spam es semanticamente mejor que utilizar <i> como lo menciona la ayuda de la página oficial de Font Awesome, sin emabargo es posible utilizar cualquiera de las dos.

Una de las características de estos íconos es la rotación, la puedes experimentar con el estilo: fa-spin

Font Awesome incluye el soporte para botones, listas y controles HTML, puedes encontrar documentación completa en: http://fortawesome.github.io/Font-Awesome/examples/

Saludos