Bootstrap proporciona un conjunto de iconos gráficos, símbolos y fuentes llamados Glyphicons . Algunos Glyphicons como el ícono de inicio, el ícono de usuario, el ícono de candado, etc. Generalmente, los Glyphicons son fuentes de íconos que puede usar en sus proyectos web. Bootstrap incluye 260 glyphicons . Estos glyphicons utilizados para el proyecto web de Bootstrap Glyphicons Halflings Set . Glyphicons Halflings no están disponibles de forma gratuita, pero su creador los ha puesto a disposición para Bootstrap de forma gratuita.
Aplicaciones:
- Para comprender de forma más eficaz y sencilla en proyectos web.
- Se utiliza para algunos textos, formularios, botones, navegación, etc.
- Para dar un aspecto efectivo y auténtico a cualquier proyecto web.
- Para definir cualquier cosa usándolo, puede ser fácil.
Ahora veamos cómo usar glyphicons en Bootstrap
Enfoque: para usar el ícono de Glyphicons en Bootstrap, use el siguiente código en cualquier parte de su código. Deje un espacio entre el ícono y el texto para un relleno adecuado como:
<span class = "glyphicon glyphicon-search"></span>
Incluya Bootstrap3 y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” ></guión>
Ejemplo 1: En este ejemplo, veremos glyphicons en bootstrap y cómo usarlo dentro de una página web.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap Glyphicons Examples</h1> <p> Here are some glyphicons examples which shows different icons:- </p> <span class="glyphicon glyphicon-home"></span> Home<br> <span class="glyphicon glyphicon-search"></span> Search<br> <span class="glyphicon glyphicon-user"> </span>User<br> <span class="glyphicon glyphicon-lock"> </span> Lock </div> </body> </html>
Producción:
Ejemplos de Glyphicons Bootstrap
Ejemplo 2: En este ejemplo, usaremos glyphicons junto con botones con diferentes tamaños de botones.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1>Bootstrap Glyphicons Examples</h1> <p> Here are some glyphicons along with buttons with different buttons size:- </p> <p> Home Icon <span class= "glyphicon glyphicon-home"></span><br> </p> <p> Search Icon <span class= "glyphicon glyphicon-search"></span> <br> </p> <p>Home Icon along with small button <button type="button" class="btn btn-sm btn-primary"> <span class="glyphicon glyphicon-home"></span> Home </button> </p> <p>Search Icon along with small button <button type="button" class="btn btn-sm btn-primary"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Home Icon along with button <button type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-home"></span> Home </button> </p> <p>Search Icon along with button <button type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Home Icon along with long button <button type="button" class="btn btn-lg btn-success"> <span class="glyphicon glyphicon-home"></span> Home </button> </p> <p>Search Icon along with long button <button type="button" class="btn btn-lg btn-success"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> </div> </body> </html>
Producción:
Bootstrap Glyphicons con diferentes tamaños de botones
Publicación traducida automáticamente
Artículo escrito por khushiguptakhushi02 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA