How do Bootstrap Glyphicons work?

Question

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?

Answer 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>