Con Bootstrap puedes utilizar 200 iconos que se incluyen en una fuente especial llamada Glyphicons Halflings. Esta fuente es comercial, pero su creador permite que se utilice gratuitamente en Bootstrap. Por eso, como agradecimiento, cuando utilices estos iconos, deberías colocar un enlace a Glyphicons siempre que te sea posible.
Puedes usar los Glyphicons en textos, botones, barras de herramientas, barras de navegación, formularios, etc.
A continuación te muestro algunos ejemplos de glyphicons:
Sintaxis glyphicons
Para insertar un gliphicon debes de utilizar la siguiente sintaxis:
<span class="glyphicon glyphicon-nombre"></span>
donde nombre es el nombre real del glyphicon.
Ejemplo
El siguiente ejemplo muestra las diferentes maneras de usar glyphicons:
<!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo Bottstrap - Webdisenia</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"> <p></p>Icono <b>envelope</b> (sobre): <span class="glyphicon glyphicon-envelope"></span></p> <p>Icono <b>envelope</b> (sobre) como enlace: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a></p> <p>Icono <b>search</b> (buscar): <span class="glyphicon glyphicon-search"></span></p> <p>Icono <b>search</b> (buscar) como botón: <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Buscar </button></p> <p>Icono <b>search</b> (buscar) como botón info: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Buscar </button></p> <p>Icono <b>print</b> (imprimir): <span class="glyphicon glyphicon-print"></span></p> <p>Icono <b>print</b> (imprimir) en un botón grande: <a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-print"></span> Imprimir </a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
Resultado en el navegador
Pingback: Bootstrap (parte 20): Barras de navegación - Webdisenia