Bootstrap Font Icons (Glyphicons)

This chapter will explain font icons (Glyphicons), and through some examples you will learn how to use them. Bootstrap bundles more than 200 font-format glyphs. First, let us understand what font icons are.

---

What are font icons?

Font icons are icon fonts used in Web projects. Although,Glyphicons Halflingsthey require a commercial license, you can use these icons for free through the project-based Bootstrap.

To show gratitude to the icon authors, we hope you will add a link to the GLYPHICONS website when using them.

---

Getting Font Icons

We have alreadyEnvironment Installationchapter, we downloaded the Bootstrap 3.x version and understood its directory structure. In thefontsfolder, you can find the font icons, which include the following files:

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

The related CSS rules are written indistthe css folder inside the folderbootstrap.cssandbootstrap-min.csson the file.

Font Icons List

Click here to view the list of available font icons.

---

CSS Rules Explanation

The following CSS rules make up the glyphicon class.

So the @font-face rule actually declares the font-family and location where the glyphicons are found.

.glyphiconThe class declares a relative position offset by 1px from the top, displayed as inline-block, declares the font, specifies font-style and font-weight as normal, and sets line-height to 1. In addition, use-webkit-font-smoothing: antialiasedand-moz-osx-font-smoothing: grayscale;to get cross-browser consistency.

Then, here

.glyphicon:empty {
  width: 1em;
}

is the empty glyphicon.

There are 200 classes here, each class targets one icon. The common format of these classes is as follows:

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

For example, the user icon used has the following class:

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

---

Usage

To use an icon, simply use the following code. Please leave appropriate space between the icon and the text.

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

The following example demonstrates how to use font icons:

The result is as shown below:

---

Navbar with Font Icons

---

Customizing Font Icons

We have already seen how to use font icons. Next, let's see how to customize font icons.

We will start with the above example, and customize the icons by changing font size, color, and applying text shadow.

Here is the starting code:

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

The effect is as shown below:

Customizing Font Sizes

By increasing or decreasing the font size of an icon, you can make the icon look larger or smaller.

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

Customizing Font Colors

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

Applying Text Shadows

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Customize Font Icons Online

Click here to customize font icons »

---

Icon List

Icon	Class Name	Example
	glyphicon glyphicon-asterisk	Try it
	glyphicon glyphicon-plus	Try it
	glyphicon glyphicon-minus	Try it
	glyphicon glyphicon-euro	Try it
	glyphicon glyphicon-cloud	Try it
	glyphicon glyphicon-envelope	Try it
	glyphicon glyphicon-pencil	Try it
	glyphicon glyphicon-glass	Try it
	glyphicon glyphicon-music	Try it
	glyphicon glyphicon-search	Try it
	glyphicon glyphicon-heart	Try it
	glyphicon glyphicon-star	Try it
	glyphicon glyphicon-star-empty	Try it
	glyphicon glyphicon-user	Try it
	glyphicon glyphicon-film	Try it
	glyphicon glyphicon-th-large	Try it
	glyphicon glyphicon-th	Try it
	glyphicon glyphicon-th-list	Try it
	glyphicon glyphicon-ok	Try it
	glyphicon glyphicon-remove	Try it
	glyphicon glyphicon-zoom-in	Try it
	glyphicon glyphicon-zoom-out	Try it
	glyphicon glyphicon-off	Try it
	glyphicon glyphicon-signal	Try it
	glyphicon glyphicon-cog	Try it
	glyphicon glyphicon-trash	Try it
	glyphicon glyphicon-home	Try it
	glyphicon glyphicon-file	Try it
	glyphicon glyphicon-time	Try it
	glyphicon glyphicon-road	Try it
	glyphicon glyphicon-download-alt	Try it
	glyphicon glyphicon-download	Try it
	glyphicon glyphicon-upload	Try it
	glyphicon glyphicon-inbox	Try it
	glyphicon glyphicon-play-circle	Try it
	glyphicon glyphicon-repeat	Try it
	glyphicon glyphicon-refresh	Try it
	glyphicon glyphicon-list-alt	Try it
	glyphicon glyphicon-lock	Try it
	glyphicon glyphicon-flag	Try it
	glyphicon glyphicon-headphones	Try it
	glyphicon glyphicon-volume-off	Try it
	glyphicon glyphicon-volume-down	Try it
	glyphicon glyphicon-volume-up	Try it
	glyphicon glyphicon-qrcode	Try it
	glyphicon glyphicon-barcode	Try it
	glyphicon glyphicon-tag	Try it
	glyphicon glyphicon-tags	Try it
	glyphicon glyphicon-book	Try it
	glyphicon glyphicon-bookmark	Try it
	glyphicon glyphicon-print	Try it
	glyphicon glyphicon-camera	Try it
	glyphicon glyphicon-font	Try it
	glyphicon glyphicon-bold	Try it
	glyphicon glyphicon-italic	Try it
	glyphicon glyphicon-text-height	Try it
	glyphicon glyphicon-text-width	Try it
	glyphicon glyphicon-align-left	Try it
	glyphicon glyphicon-align-center	Try it
	glyphicon glyphicon-align-right	Try it
	glyphicon glyphicon-align-justify	Try it
	glyphicon glyphicon-list	Try it
	glyphicon glyphicon-indent-left	Try it
	glyphicon glyphicon-indent-right	Try it
	glyphicon glyphicon-facetime-video	Try it
	glyphicon glyphicon-picture	Try it
	glyphicon glyphicon-map-marker	Try it
	glyphicon glyphicon-adjust	Try it
	glyphicon glyphicon-tint	Try it
	glyphicon glyphicon-edit	Try it
	glyphicon glyphicon-share	Try it
	glyphicon glyphicon-check	Try it
	glyphicon glyphicon-move	Try it
	glyphicon glyphicon-step-backward	Try it
	glyphicon glyphicon-fast-backward	Try it
	glyphicon glyphicon-backward	Try it
	glyphicon glyphicon-play	Try it
	glyphicon glyphicon-pause	Try it
	glyphicon glyphicon-stop	Try it
	glyphicon glyphicon-forward	Try it
	glyphicon glyphicon-fast-forward	Try it
	glyphicon glyphicon-step-forward	Try it
	glyphicon glyphicon-eject	Try it
	glyphicon glyphicon-chevron-left	Try it
	glyphicon glyphicon-chevron-right	Try it
	glyphicon glyphicon-plus-sign	Try it
	glyphicon glyphicon-minus-sign	Try it
	glyphicon glyphicon-remove-sign	Try it
	glyphicon glyphicon-ok-sign	Try it
	glyphicon glyphicon-question-sign	Try it
	glyphicon glyphicon-info-sign	Try it
	glyphicon glyphicon-screenshot	Try it
	glyphicon glyphicon-remove-circle	Try it
	glyphicon glyphicon-ok-circle	Try it
	glyphicon glyphicon-ban-circle	Try it
	glyphicon glyphicon-arrow-left	Try it
	glyphicon glyphicon-arrow-right	Try it
	glyphicon glyphicon-arrow-up	Try it
	glyphicon glyphicon-arrow-down	Try it
	glyphicon glyphicon-share-alt	Try it
	glyphicon glyphicon-resize-full	Try it
	glyphicon glyphicon-resize-small	Try it
	glyphicon glyphicon-exclamation-sign	Try it
	glyphicon glyphicon-gift	Try it
	glyphicon glyphicon-leaf	Try it
	glyphicon glyphicon-fire	Try it
	glyphicon glyphicon-eye-open	Try it
	glyphicon glyphicon-eye-close	Try it
	glyphicon glyphicon-warning-sign	Try it
	glyphicon glyphicon-plane	Try it
	glyphicon glyphicon-calendar	Try it
	glyphicon glyphicon-random	Try it
	glyphicon glyphicon-comment	Try it
	glyphicon glyphicon-magnet	Try it
	glyphicon glyphicon-chevron-up	Try it
	glyphicon glyphicon-chevron-down	Try it
	glyphicon glyphicon-retweet	Try it
	glyphicon glyphicon-shopping-cart	Try it
	glyphicon glyphicon-folder-close	Try it
	glyphicon glyphicon-folder-open	Try it
	glyphicon glyphicon-resize-vertical	Try it
	glyphicon glyphicon-resize-horizontal	Try it
	glyphicon glyphicon-hdd	Try it
	glyphicon glyphicon-bullhorn	Try it
	glyphicon glyphicon-bell	Try it
	glyphicon glyphicon-certificate	Try it
	glyphicon glyphicon-thumbs-up	Try it
	glyphicon glyphicon-thumbs-down	Try it
	glyphicon glyphicon-hand-right	Try it
	glyphicon glyphicon-hand-left	Try it
	glyphicon glyphicon-hand-up	Try it
	glyphicon glyphicon-hand-down	Try it
	glyphicon glyphicon-circle-arrow-right	Try it
	glyphicon glyphicon-circle-arrow-left	Try it
	glyphicon glyphicon-circle-arrow-up	Try it
	glyphicon glyphicon-circle-arrow-down	Try it
	glyphicon glyphicon-globe	Try it
	glyphicon glyphicon-wrench	Try it
	glyphicon glyphicon-tasks	Try it
	glyphicon glyphicon-filter	Try it
	glyphicon glyphicon-briefcase	Try it
	glyphicon glyphicon-fullscreen	Try it
	glyphicon glyphicon-dashboard	Try it
	glyphicon glyphicon-paperclip	Try it
	glyphicon glyphicon-heart-empty	Try it
	glyphicon glyphicon-link	Try it
	glyphicon glyphicon-phone	Try it
	glyphicon glyphicon-pushpin	Try it
	glyphicon glyphicon-usd	Try it
	glyphicon glyphicon-gbp	Try it
	glyphicon glyphicon-sort	Try it
	glyphicon glyphicon-sort-by-alphabet	Try it
	glyphicon glyphicon-sort-by-alphabet-alt	Try it
	glyphicon glyphicon-sort-by-order	Try it
	glyphicon glyphicon-sort-by-order-alt	Try it
	glyphicon glyphicon-sort-by-attributes	Try it
	glyphicon glyphicon-sort-by-attributes-alt	Try it
	glyphicon glyphicon-unchecked	Try it
	glyphicon glyphicon-expand	Try it
	glyphicon glyphicon-collapse-down	Try it
	glyphicon glyphicon-collapse-up	Try it
	glyphicon glyphicon-log-in	Try it
	glyphicon glyphicon-flash	Try it
	glyphicon glyphicon-log-out	Try it
	glyphicon glyphicon-new-window	Try it
	glyphicon glyphicon-record	Try it
	glyphicon glyphicon-save	Try it
	glyphicon glyphicon-open	Try it
	glyphicon glyphicon-saved	Try it
	glyphicon glyphicon-import	Try it
	glyphicon glyphicon-export	Try it
	glyphicon glyphicon-send	Try it
	glyphicon glyphicon-floppy-disk	Try it
	glyphicon glyphicon-floppy-saved	Try it
	glyphicon glyphicon-floppy-remove	Try it
	glyphicon glyphicon-floppy-save	Try it
	glyphicon glyphicon-floppy-open	Try it
	glyphicon glyphicon-credit-card	Try it
	glyphicon glyphicon-transfer	Try it
	glyphicon glyphicon-cutlery	Try it
	glyphicon glyphicon-header	Try it
	glyphicon glyphicon-compressed	Try it
	glyphicon glyphicon-earphone	Try it
	glyphicon glyphicon-phone-alt	Try it
	glyphicon glyphicon-tower	Try it
	glyphicon glyphicon-stats	Try it
	glyphicon glyphicon-sd-video	Try it
	glyphicon glyphicon-hd-video	Try it
	glyphicon glyphicon-subtitles	Try it
	glyphicon glyphicon-sound-stereo	Try it
	glyphicon glyphicon-sound-dolby	Try it
	glyphicon glyphicon-sound-5-1	Try it
	glyphicon glyphicon-sound-6-1	Try it
	glyphicon glyphicon-sound-7-1	Try it
	glyphicon glyphicon-copyright-mark	Try it
	glyphicon glyphicon-registration-mark	Try it
	glyphicon glyphicon-cloud-download	Try it
	glyphicon glyphicon-cloud-upload	Try it
	glyphicon glyphicon-tree-conifer	Try it
	glyphicon glyphicon-tree-deciduous	Try it

Other extensions