Bootstrap 3 Tutorial
BS Glyphicons
Glyphicons
Bootstrap includes 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, and more.
Here are some examples of glyph icons:
Envelope glyphicon: ✉
Print the glyphicon: 🖨
Search the glyphicon: 🔍
Download the glyphicon: ⬇
Glyphicon Syntax
A glyphicon is inserted using the following syntax:
<span class="glyphicon glyphicon-name"></span>
The name part of the above syntax must be replaced with the glyphicon’s proper name.
Glyphicon Example
The following example demonstrates many ways to use glyphicons.
Example
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
