jueves, 27 de febrero de 2014

Usar iconos en Bootstrap 3


Bienvenid@s, Bootstrap ofrece una gran variedad de iconos en la versión free de glyphicons, que es una librería de iconos y símbolos, estos iconos forman parte esencial del diseño de la aplicación y una forma de hacer más intuitiva la web al visitante-cliente.

A continuación vamos a ver algunos ejemplos de como incluir iconos con Bootstrap, icono en un span, icono en un botón, icono a la izquierda o a la derecha de un botón con texto ...

<!doctype html>
<html>
<head>
<title>Incluir iconos en Bootstrap 3</title>
<meta charset='UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<p><strong>Icono simple: </strong> <span class='glyphicon glyphicon-phone'></span></p>
<p><strong>Botón icono: </strong> <button type='button' class='btn'><span class='glyphicon glyphicon-camera'></span></button></p>
<p><strong>Icono a la izquierda de un botón: <strong> <button type='button' class='btn'><span class='glyphicon glyphicon-info-sign'></span> Información</button></p>
<p><strong>Icono a la derecha de un botón: <strong> <button type='button' class='btn'>Actualizar <span class='glyphicon glyphicon-refresh'></span></button></p>
</div>
</body>
</html>


Resultado:



Listado completo de iconos con sus respectivas clases en Bootstrap glyphicon.