Cómo usar Font Awesome en nuestro proyecto

Font Awesome son unos gráficos de vectores de uso libre que pueden incorporarse como si fueran fuentes de letra a nuestros proyectos web, con la ventaja de que pueden ser reescalados a varios tamaños y que apenas ocupan.

Para usarlos lo mejor es cargarlos del CDN (Content Delivery Network), ya que de esta forma, con mucha probabilidad los usuarios ya lo tendrán en el caché de su navegador, con lo que la transferencia de datos es cero.

Para esto, sólo hay que añadir en la cabecera de la página web esta línea:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Con esto se carga la hoja de estilos y el archivo de fuentes en el navegador del usuario, y ya es posible empezar a insertar iconos en las páginas, de forma tan sencilla como esto, que inserta el icono de una estrella:

<i class="fa fa-star fa-lg"></i>

Los iconos de Font Awesome tienen clases interesantes, que también pueden usarse con los glyphicons si se está usando Bootstrap, por ejemplo, la clase fa-spin que hace girar un icono:

<i class="fa fa-star fa-lg fa-spin"></i>

Podría usarse también con un glyphicon de Bootstrap:

<i class="glyphicon glyphicon-star"></i>

Añadíendole esta clase así:

<i class="glyphicon glyphicon-star fa-spin"></i>

Notas:

• La primera estrella sale de la fuente de Font Awesome y la segunda de la fuente de los glyphicons de Bootstrap.
• No existe diferencia entre usar el tag <i> recomendado en la documentación de Font Awesome y el tag <span> usado por defecto en Bootstrap, ya que el icono se carga de la fuente de letra por la clase indicada, por lo que el resultado es idéntico. Formalmente es más correcto usar <span>, pero en la práctica da igual.

Más información:

• Información de uso de Font Awesome.
• Lista de iconos Font Awesome.
• Lista de glyphicons y otros componentes de Bootstrap.

Como ejemplo de uso de Font Awesome he escrito este pequeño código para jugar a «Piedra, Papel, Tijera, Lagarto, Spock», ya que los autores de Font Awesome parecen ser fans de la serie The Big Bang Theory y han tenido la amabilidad de crear los iconos de lagarto y spock.

Para que funcione el ejemplo hace falta tener cargado Bootstrap además de Font Awesome. Si no lo tienes puedes cargarlo añadiendo esta línea en el header de tu página:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Código de ejemplo:

<?php
/**
 * @name Ejemplo para jugar a Piedra Papel Tijera Lagarto Spock
 * @copyright (c)2015 Intervia IT
 * @link http://intervia.com/doc/como-usar-font-awesome-en-nuestro-proyecto/
 * @license MIT http://opensource.org/licenses/MIT
 */

//Genera un número aleatorio entre 1 y 5
$pptls = rand(1,5);

//Asigna los colores de cada resultado
if ($pptls == 1){ //piedra
    $piedra = "animated flash text-info";
    $papel = "text-success";
    $tijera = "text-danger";
    $lagarto = "text-danger";
    $spock = "text-success";
}
if ($pptls == 2){ //papel
    $piedra = "text-danger";
    $papel = "animated flash text-info";
    $tijera = "text-success";
    $lagarto = "text-success";
    $spock = "text-danger";
}
if ($pptls == 3){ //tijera
    $piedra = "text-success";
    $papel = "text-danger";
    $tijera = "animated flash text-info";
    $lagarto = "text-danger";
    $spock = "text-success";
}
if ($pptls == 4){ //lagarto
    $piedra = "text-success";
    $papel = "text-danger";
    $tijera = "text-success";
    $lagarto = "animated flash text-info";
    $spock = "text-danger";
}
if ($pptls == 5){ //spock
    $piedra = "text-danger";
    $papel = "text-success";
    $tijera = "text-danger";
    $lagarto = "text-success";
    $spock = "animated flash text-info";
}

//HTML en el que se inserta el código seleccionado dentro del icono correspondiente
?>
<h2>Juega a Piedra Papel Tijera Lagarto Spock</h2>
<br><br>
<i class="fa fa-hand-rock-o fa-5x <?=$piedra?>"></i> 
<i class="fa fa-hand-paper-o fa-5x <?=$papel?>"></i> 
<i class="fa fa-hand-scissors-o fa-5x <?=$tijera?>"></i> 
<i class="fa fa-hand-lizard-o fa-5x <?=$lagarto?>"></i> 
<i class="fa fa-hand-spock-o fa-5x <?=$spock?>"></i> 
<br><br><br>

<a href="<?=$_SERVER['PHP_SELF']?>">
 <button class="btn-default btn-lg"><i class="fa fa-star fa-lg fa-spin"></i> Jugar</button>
</a>

Aquí puedes verlo funcionando con instrucciones:
http://intervia.com/piedra-papel-tijera-lagarto-spock
 

La clase animated flash no está incluida en Bootstrap ni Font Awesome, sirve para hacer parpadear cualquier elemento, botones, barras, iconos o lo que sea.
Se puede ver como funciona en esta página