Bootstrap Glyphicons and Badges
Glyphicons
Bootstrap provides 200 glyphicons from the Glyphicons
Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
Glyphicon Syntax
A glyphicon is inserted with the following syntax:
<span class="glyphicon glyphicon-name"></span>
The name part in the syntax above must be replaced with the proper name of the glyphicon.
Glyphicon Example
The following example shows different 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>
Try it Yourself »
Badges
Badges are numerical indicators of how many items are associated with a link:
News 5
Comments 10
Updates 2
The numbers (5, 10, and 2) are the badges.
Use the .badge
class within <span>
elements to create badges:
Example
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments
<span class="badge">10</span></a><br>
<a href="#">Updates <span
class="badge">2</span></a>
Try it Yourself »
Badges can also be used inside other elements, such as buttons:
The following example shows how to add badges to buttons:
Example
<button type="button" class="btn btn-primary">Primary <span
class="badge">7</span></button>
Try it Yourself »
Complete Bootstrap Glyphicon Reference
For a complete reference of all glyphicons, go to our complete
Bootstrap Glyphicon Reference.
Color Picker