Bootstrap (Parte 11): Glyphicons

Redes sociales

Logo Bootstrap

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&oacute;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&oacute;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

 

Referencia de todos los Glyphicons Bootstrap

Redes sociales

1 Comentario

  1. Pingback: Bootstrap (parte 20): Barras de navegación - Webdisenia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.