Cómo usar Bootstrap 3 glifinas
¡Los glificos son geniales! Son una de mis adiciones favoritas a Bootstrap 3 nativo. He estado trabajando con estos glifos bastante, así que pensé en hacer una hoja de trucos para mí.
¿Chuleta?
¡Sí! Para usar esta hoja de trucos, simplemente busque el glificon que desea usar y haga clic en el botón copiar. Esto agregará el código HTML completo para ese glificon (etiqueta span y todo) a su portapapeles, listo para pegar en la herramienta de desarrollo web de su elección.
¿Qué son?
Los glificos son básicamente pequeños símbolos, iconos o pictogramas (como prefieras llamarlos) que puedes usar en una página web. Se implementan en Bootstrap como una fuente de icono, una fuente personalizada que contiene estos glifos en lugar de letras.
El conjunto Glyphicons Halflings tiene 250 glifos, pero esto no es gratuito. Para obtener iconos, necesitamos una licencia. El creador de Glyphicons Halflings hizo que estos iconos fueran gratuitos para proyectos de bootstrap. Los glifos son un conjunto de símbolos e iconos para entender de forma más eficaz y sencilla en proyectos web. Los glifos se utilizan para algunos textos, formularios, botones, navegación, etc.
Si está creando un sitio basado en Bootstrap 3.3.7, ya tiene acceso a los 260 glifos del conjunto Glyphicons 1.9.
Los glificones Bootstrap ayudan a obtener símbolos limpios sobre la información. Ayuda a entender el contenido fácilmente. El siguiente tamaño de glificones puede variar según los requisitos. En la página librería se muestran algunos glifinas importantes que se utilizan comúnmente en aplicaciones web.
¿No sabes cómo configurar Bootstrap? Echa un vistazo a la guía oficial de introducción, o simplemente incluye estas dos líneas en tu etiqueta:<head>
CSS:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">JavaScript:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> (Alojamiento Bootstrap muy amablemente proporcionado por https://www.bootstrapcdn.com/ )Contrapunto: Importante
Las fuentes de iconos no son la única forma de implementar iconos en la web. Si está buscando una explicación sobre el uso de fuentes de iconos frente a archivos de .SVG (otro método posible), le sugiero que lea esta excelente publicación de Ian Feather: Diez razones por las que cambiamos de una fuente de icono a SVG ver enlace.
Sintaxis
El bootstrap tiene muchos Glphyicons pero hay un formato estándar para mostrar iconos.
La sintaxis de los glificos de bootstrap es la siguiente:
<span class = “glyphicon glyphicon-name”> </span>
En la sintaxis "nombre" se cambia con el nombre de glificono
¿Quién los hizo?
Los glificos que ves en Bootstrap son parte de un conjunto llamado Glyphicons Halflings y fueron creados por el talentoso Jan Kovařík en GLYPHICONS.
¿Puedo usarlos?
Respuesta corta: ¡absolutamente! Jan los ha liberado amablemente bajo la misma licencia MIT que Bootstrap. Si desea obtener más detalles, consulte la página de licencias de Jan.
Funcionalidades
Entonces, ¿cómo agrego un icono a mi página web? Bueno, los glificones se pueden usar en la web de una de tres maneras. A continuación se presentan los ejemplos para implementar:
1.HTML Etiqueta
Puede usar una etiqueta simple para colocar un glificon en su página, como esta: <span>
=
Ejemplo:
<span class="glyphicon glyphicon-home"></span>=- La primera clase, el glificono, es una clase base. Le dice a la etiqueta: "oye, atención: esto va a ser un icono".
<span> - La segunda clase (en este ejemplo, glyphicon-home) apunta al icono específico que desea usar. ¡Este es un icono de una casa!
Advertencia: No mezcle glifinas con otros componentes
Las clases de icono no deben combinarse con otros elementos de Bootstrap. Están diseñados para ser independientes.
Ejemplos:
Puede usar glificones de varias maneras. Aquí hay cuatro ejemplos en acción: en botones, grupos de botones para una barra de herramientas, navegación o entradas de formularios prependidos, y con CSS.Botones:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Estrella
</button>
Explicación al código anterior: Usando botones podemos modificar iconos según el tamaño. Aquí usamos la clase de botón principal. Necesitamos la clase de botón, así como la clase de tamaño btn para modificar los iconos con el tamaño de los botones. El btn-lg significa un botón grande, ya que btn-sm significa botón pequeño.
Barra de herramientas
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-right">
</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-justify">
</span>
</button>
</div>
</div>
Navegación
<ul class="nav nav-pills">
<li>
<a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
<li>
<a href="shop.html">
<span class="glyphicon glyphicon-shopping-cart"></span> Shop
</a>
</li>
<li>
<a href="about.html">
<span class="glyphicon glyphicon-info-sign"></span> About
</a>
</li>
</ul>
Entradas de formulario
<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input class="form-control" type="password" placeholder="Password">
</div>
Explicación al código anterior: La clase = "input-group-addon" se utiliza para los iconos que se colocan junto al atributo de campo de entrada. Estamos utilizando iconos para el formato de formulario. La forma puede parecer atractiva y significativa. Cada campo de entrada tiene un significado como nombre de usuario, contraseña y correo electrónico. Para la clase Username glyphicon-user utilizada en verticalmente. La contraseña y el correo electrónico utilizaron glificon-envolop y glyphicon-lock.
GLIFOS Bootstrap con CSS:
El ejemplo de glificones de Bootstrap con CSS está a continuación.
Código:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
#icon1 {
color: blue;
font-size: 30px;
border: 1px solid black;
margin-left: 10px;
background-color: yellow;
}
#icon2 {
color: orange;
font-size: 30px;
margin-left: 10px;
}
#icon3 {
color: red;
font-size: 30px;
margin-left: 10px;
background:yellow;
padding:5PX;
border-radius:20px;
}
#icon4 {
color: silver;
background-color : black;
font-size: 30px;
margin-left: 10px;
}
</style>
</head>
<body>
<hr>
<span id= "icon1" class = "glyphicon glyphicon-flag"></span> Flag
<hr>
<span id= "icon2" class = "glyphicon glyphicon-book"></span>
Book
<hr>
<span id= "icon3" class = "glyphicon glyphicon-heart"></span>
Heart
<hr>
<span id= "icon4" class = "glyphicon glyphicon-star"></span>
Star
<hr>
</body>
</html>
Resultado:
ANTES de CSS aplicado a los glifos de arranque, se observan a continuaciónen su forma natural.
Sin CSS
Con CSS
Después del CSS expuesto arriba, y aplicado a bootstrap los glifinas están a continuación con los ajustes correspondientes.
Explicación al código anterior: Puede ver la diferencia entre los iconos después y antes. Usando CSS podemos cambiar el tamaño, color, color de fondo, margen, etc.
Conclusión:
Los glifos de arranque son un icono utilizado para la forma, el texto, la navegación y muchos otros componentes web. Esto ayuda a reducir el texto y dar información significativa en resumen.
_______________________________________________________________________________ Fuentes:https://glyphicons.bootstrapcheatsheets.com/# https://www.educba.com/bootstrap-glyphicons/⁂
