Bootstrap - Glyphicons
This chapter will discuss about Glyphicons,
its use and some examples. Bootstrap bundles 200 glyphs in font format. Let us
now understand what Glyphicons are.
What are Glyphicons?
Glyphicons are icon fonts which you can use in your web
projects. Glyphicons Halflings are not free
and require licensing, however their creator has made them available for
Bootstrap projects free of cost.
"It is
recommended, as a thank you, we ask you to include an optional link back to
GLYPHICONS whenever practical". — Bootstrap Documentation
Where to find Glyphicons?
Now that we have downloaded Bootstrap 3.x version and
understand its directory structure from the chapter Environment Setup, glyphicons can be found within the fonts folder.
This contains the following files −
Associated CSS rules are present within bootstrap.css and bootstrap-min.cssfiles
within css folder of dist folder.
You can see the available glyphicons at this
link GLYPHICONS.
Usage
To use the icons, simply use the following code just
about anywhere in your code. Leave a space between the icon and text for proper
padding.
<span
class = "glyphicon glyphicon-search"></span>
The following example demonstrates this −
<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>