Bootstrap Glyphicons
This chapter will explain Glyphicons and provide examples to understand their usage. Bootstrap bundles over 200 glyphs in font format. Let's first understand what a glyph icon is.
What are Glyphicons?
Glyphicons are icon fonts used in web projects. Although Glyphicons Halflings require a commercial license, you can use these icons for free with Bootstrap.
To show appreciation to the icon authors, it is recommended to include a link to the GLYPHICONS website when using them.
Getting Glyphicons
We have already downloaded the Bootstrap 3.x version in the Environment Setup chapter and understood its directory structure. You can find the glyphicons in the fonts folder, which includes 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 in the bootstrap.css and bootstrap-min.css files within the css folder in the dist folder.
Glyphicons List
Click here to view the list of available glyphicons.
CSS Rules Explained
The following CSS rules constitute the glyphicon class.
@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');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
The font-face rule actually declares the font-family and location where glyphicons are found.
The .glyphicon class declares a relative position offset by 1px from the top, renders as inline-block, declares the font, sets font-style and font-weight to normal, and sets the line-height to 1. Additionally, it uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; for cross-browser consistency.
Then, this
.glyphicon:empty {
width: 1em;
}
is for empty glyphicons.
There are 200 classes, each targeting a specific icon. These classes typically follow this format:
.glyphicon-keyword:before {
content: "hexvalue";
}
For example, the user icon has the following class:
.glyphicon-user:before {
content: "\e008";
}
Usage
To use an icon, simply use the following code. Ensure there is appropriate space between the icon and the text.
Below is an example demonstrating how to use font icons:
Example
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
The result is shown below:
Navigation Bar with Font Icons
Example
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">Home</span></a>
</li>
<li>
<a href="#shop">
<span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
</li>
<li>
```html
<a href="#support">
<span class="glyphicon glyphicon-headphones">Support</span>
</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- jQuery (Bootstrap plugin requires) -->
<script src="https://cdn.static.tutorialpro.org/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Includes all compiled plugins -->
<script src="https://cdn.static.tutorialpro.org/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Customizing Font Icons
We have seen how to use font icons, now let's see how to customize them.
We will start with the example above and customize the icons by changing the font size, color, and applying text shadows.
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 shown below:
Customizing Font Size
By increasing or decreasing the font size of the icons, you can make the icons appear 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 Color
<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 Shadow
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> User
</button>
Online Customization of Font Icons
Click here to customize font icons »
Icon List
| Icon | Class | 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 |