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>