twitter-bootstrap - glyphicon - iconos bootstrap

¿Cómo funcionan Bootstrap Glyphicons?

Question

Conozco algunos conceptos básicos de CSS y HTML, y en ocasiones trabajo con ellos, pero no soy profesional, y tengo curiosidad sobre cómo funciona Bootstrap Glyphicons. Quiero decir que no hay imágenes en el archivo comprimido de Bootstrap, entonces, ¿de dónde vienen las imágenes?

Answer 1

En Bootstrap 2.x, Glyphicons usó el método de imagen, usando imágenes como mencionaste en tu pregunta.

Los inconvenientes con el método de imagen fue que:

• No pudiste cambiar el color de los iconos
• No se pudo cambiar el color de fondo de los iconos
• No puedes aumentar el tamaño de los iconos

Entonces, en lugar de los glyphicons en Bootstrap 2.x, muchas personas usaban Font-awesome, ya que usaban iconos SVG que no tenían tales limitaciones.

En Bootstrap 3.x, los glifos usan el método de fuente.

Usar una fuente para representar un icono tiene ventajas sobre el uso de imágenes:

• Escalable: funciona bien independientemente de la resolución del dispositivo del cliente
• Puede cambiar el color con CSS
• Puede hacer todo lo que los iconos tradicionales pueden (por ejemplo, cambiar la opacidad, la rotación, etc.)
• Puede agregar trazos, degradados, sombras, etc.
• Convertir a texto (con ligaduras)
• Las ligaduras son leídas por lectores de pantalla
• Cambiar iconos a fuentes es tan simple como cambiar la familia de fuentes en CSS

here puede ver qué puede hacer con el método de fuente para los iconos.

Entonces, en la distribución de Bootstrap, puede ver los archivos de fuentes de glyphicon:

fonts/glyphicons-halflings-regular.eot
fonts/glyphicons-halflings-regular.svg
fonts/glyphicons-halflings-regular.ttf
fonts/glyphicons-halflings-regular.woff

El CSS de Bootstrap se refiere a la fuente de glyphicon así:

@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'');
}

Y el CSS se vincula a esta fuente usando la clase base .glyphicon (observe la font-family ):

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: ''Glyphicons Halflings'';
  font-style: normal;
  font-weight: normal;
  ...
}

Y luego, cada glyphicon usa una clase de icono individual que hace referencia a una referencia Unicode dentro de la fuente Glyphicon Halflings, por ejemplo:

.glyphicon-envelope:before {
  content: "/2709";
}

Esta es la razón por la que debe usar la clase base .glyphicon así como la clase de icono individual contra el elemento span en Bootstrap 3:

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