Ver índice de contenidos del libro

6.1.  Iconos (glyphicons)

Bootstrap incluye 180 iconos creados mediante una fuente especial llamada Glyphicon Halflings. Aunque esta fuente normalmente no es gratuita, su creador permite utilizar estos iconos gratuitamente dentro de Bootstrap 3. Lo único que te pedimos es que, si es posible, incluyas en tu sitio un enlace al proyecto Glyphicons.

6.1.1. Listado completo de los iconos disponibles

A continuación se muestran todos los iconos de Bootstrap 3 y las clases CSS necesarias para utilizar cada uop:

6.1.2. Cómo utilizar los iconos

Por motivos de rendimiento, todos los iconos requieren de una clase CSS común para todos y de una clase CSS específica para cada uno. Para añadir un icono en cualquier elemento de la página, utiliza el siguiente código como ejemplo. Y no olvides añadir un espacio entre el icono y el texto para que se vea mejor:

<span class="glyphicon glyphicon-search"></span>

6.1.3. Ejemplos

Como los iconos son vectoriales, quedan bien en cualquier elemento y a cualquier tamaño. Utilízalos en botones, barras de navegación o incluso en campos de formulario. Ejemplo:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-align-left"></span>
    </button>
 
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-align-center"></span>
    </button>
 
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-align-right"></span>
    </button>
 
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-align-justify"></span>
    </button>
  </div>
</div>
 
<div class="btn-toolbar" role="toolbar">
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span> Star
  </button>
 
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-star"></span> Star
  </button>
 
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star"></span> Star
  </button>
 
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star"></span> Star
  </button>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Glyphicons en Bootstrap 3

Figura 6.1 Glyphicons en Bootstrap 3