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.
No hay comentarios:
Publicar un comentario