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

Web icon fonts

Cada vez es mas común el uso de iconos en páginas web. La forma tradicional de trabajar estos iconos era usando pequeñas imagenes. Algunos problemas de trabajarlo de esta forma es que si tu web la trabajas para dispositivos con una mayor resolución (por ejemplo pantallas de retina) tus iconos se podian ver pixeleados, otro problema es que cada imagen es una solicitud al servidor, lo que provoca muchas peticiones web, esto en parte se podia solucionar usando sprites de imagenes.

Una alternativa de solución para este problema es usar icon web fonts, es decir manejar los iconos como si fueran texto (cada icono es un caracter del conjunto de caracteres que componen la fuente). Los beneficios que nos da usar esta técnica es que los iconos ahora son vectoriales 😀 podemos cambiar su tamaño usando css (css:font-size) y su color (css:color) y todo esto sin perder calidad y hablando sobre peticiones al servidor solo se realiza una al invocar la fuente que contiene el conjunto de iconos.

Hay muchos sitios que ofrecen este tipo de fuentes, yo estoy utilizando fontawesome que proporciona un conjunto de iconos bastante amplio y es fácil de utilizar en conjunto con bootstrap. Ademas nos proporciona un cdn. Fontawesome proporciona ejemplos muy claros sobre como utilizarlo.

Esta técnica se basa en el “shadow dom” y utiliza un rango de caracteres reservado para propositos especiales.