Font Awesome es una tipografía muy utilizada para poder añadir iconos a nuestra web sin tener que hacerlo cómo imágen. Se comporta como una fuente normal, que puedes descargar e instalar en tu ordenador, y en la que cada caracter corresponde a un icono.
En nuestro HTML, podremos añadir los iconos que queramos mediante CSS, ya que cada uno de ellos corresponde a un estilo predefinido.
Para ello, sólo deberemos añadir el enlace al css en nuestro archivo
o descargárlo y colocarlo en nuestro servidor junto el resto de archivos css para no tener que depender de otro servidor.
Una vez incorporado el css de Font Awesome, simplemente podremos añadir el icono en nuestro html usándo el código
Además del icono en si, existen opciones para indicarle el tamaño, si lo queremos con rotación o incluso animación, etc… en este enlace podéis ver las distintas opciones.
¿Pero cómo podemos utilizar la fuente para preparar nuestros diseños en Photoshop?
Una vez instalada la fuente en nuestro ordenador, el problema es saber que icono corresponde a cada caracter para poder utilizarlo en nuestros diseños. La solución está en la Cheatsheet que nos ofrece en su web. Desde allí, simplemente deberemos seleccionar con el ratón el icono deseado, copiarlo (Ctrl+C o Cmd+C) y pegarlo en nuestro Photoshop como si fuera texto.
De esta forma podremos utilizar cualquiera de los iconos que nos ofrece, y darle el tamaño y color que nos interese y utilizarlo en nuestro HTML sin necesidad de imágenes. Con la ventaja que ello conlleva de cara a las versiones responsive de nuestra web, para las que podremos adaptar el tamaño de los iconos según nos convenga, sabiendo que se verán perfectamente nítidos en cualquier dispositivo.