Bootstrap Glyphicons

Objetivo

Las fuentes de iconos se están volviendo cada vez más populares debido a sus beneficios. En este tutorial discutiremos cómo usar y personalizar Glyphicons con Bootstrap 3. Explicaremos las reglas CSS que funcionan en segundo plano, lo que le permitirá comprender mejor el principio de funcionamiento de las fuentes de iconos. De esta manera, podrá familiarizarse con la configuración de cualquier fuente de iconos además de Glyphicons.

¿Qué son los Glyphicons?

Los Glyphicons son fuentes de iconos utilizadas en proyectos web. Aunque el uso de Glyphicons requiere una licencia comercial, puede usar estos iconos de forma gratuita a través de Bootstrap basado en proyectos. Para expresar nuestro agradecimiento al autor de los iconos, esperamos que al usarlos agregue un enlace alsitio web de Glyphicons.

Obtener Glyphicons

Si ya ha descargado Bootstrap 3 (o cualquier versión anterior a la 3) desde https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip, puede encontrar los glyphicons en la carpeta fonts dentro de la carpeta dist. Aquí hay cuatro archivos: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf y glyphicons-halflings-regular.woff. Las reglas CSS relacionadas están escritas en los archivos bootstrap.css y bootstrap-min.css dentro de la carpeta css dentro de la carpeta dist.

Cómo usar Glyphicons

En general, podemos derivar la sintaxis común para usar Glyphicons con Bootstrap 3 de la siguiente manera

<span class="glyphicon glyphicon-*"></span>

* puede ser cualquier palabra clave que represente un icono específico. El siguiente ejemplo demuestra cómo usarlo a través de un botón.

<button type="button" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-user"></span> User
    </button>

Explicación de las reglas CSS

Las siguientes reglas CSS constituyen la clase glyphicon

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

Así que la regla font-face realmente declara la familia de fuente y la ubicación donde se encuentran los glyphicons.

.glyphiconLa clase declara una posición relativa desplazada 1px desde la parte superior, se presenta como inline-block, declara la fuente, especifica font-style y font-weight como normal, y establece la altura de línea a 1. Además, se usa-webkit-font-smoothing: antialiasedy-moz-osx-font-smoothing: grayscale;para obtener consistencia entre navegadores.

Luego, aquí

.glyphicon:empty {
  width: 1em;
}

es el glyphicon vacío.

Aquí hay 200 clases, cada clase corresponde a un icono. El formato común de estas clases es el siguiente

.glyphicon-keyword:before {
  content: "hexvalue";
}

Por ejemplo, el icono de usuario utilizado en nuestro ejemplo tiene la siguiente clase

.glyphicon-user:before {
  content: "\e008";
}

Ya hemos visto cómo usarlo, ahora veamos cómo personalizar los Glyphicons.

Comenzaremos con el ejemplo anterior y personalizaremos los iconos cambiando el tamaño de la fuente, el color y aplicando sombra de texto.

El siguiente es el código inicial

<button type="button" class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
</button>

El efecto se muestra a continuación

Personalizar el tamaño de la fuente

Al aumentar o disminuir el tamaño de la fuente del icono, puede hacer que el icono se vea más grande o más pequeño.

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Personalizar el color de la fuente

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Aplicar sombra de texto

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

Personalizar Glyphicons

Haga clic aquí para personalizar Glyphicons en línea.