How do Bootstrap Glyphicons work?

问题

I know some basics of CSS and HTML and sometimes work with them, but am not a professional, and I'm curious about how Bootstrap Glyphicons work. I mean there are no images in the Bootstrap zip file, so where do the images come from?

回答1:

In Bootstrap 2.x, Glyphicons used the image method - using images as you mentioned in your question.

The drawbacks with the image method was that:

You couldn't change the color of the icons
You couldn't change the background-color of the icons
You couldn't increase the size of the icons

So instead of glyphicons in Bootstrap 2.x, a lot of people used Font-awesome, as this used SVG icons which did not have such limitations.

In Bootstrap 3.x, Glyphicons use the font method.

Using a font to represent an icon has advantages over using images:

Scalable - works nicely regardless of client device's resolution
Can change the colour with CSS
Can do everything traditional icons can (e.g. change opacity, rotation, etc.)
Can add strokes, gradients, shadows, and etc.
Convert to text (with ligatures)
Ligatures are read by screen readers
Changing icons to fonts is as simple as changing the font-family in CSS

You can see what you can do with the font method for icons here.

So in the Bootstrap distribution, you can see the glyphicon font files:

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

The Bootstrap CSS refers to the glyphicon font like so:

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

And the CSS links to this font using the .glyphicon base class (note the font-family):

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

And then each glyphicon uses an individual icon class which refers to a Unicode reference within the Glyphicon Halflings font, e.g.:

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

This is why you must use the base .glyphicon class as well as the individual icon class against the span element in Bootstrap 3:

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

来源：https://stackoverflow.com/questions/20279512/how-do-bootstrap-glyphicons-work

标签

twitter-bootstrap

glyphicons