Bootstrap Glyphicons
This chapter will discuss about Glyphicons, its use and some examples. Bootstrap bundles 200 glyphs in font format. First let us understand what are Glyphicons.
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 chapter Environment Setup, glyphiconscan be found within the fonts folder. This contains following files:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Associated CSS rules are present withinbootstrap.css and bootstrap-min.css files withincss folder of dist folder. You can see the availableglyphicons at this link : Glyphicons List
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>
Following example demonstrates this:
<p>
<button type="button" class="btnbtn-default">
<span class="glyphiconglyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btnbtn-default">
<span class="glyphiconglyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btnbtn-default">
<span class="glyphiconglyphicon-sort-by-order"></span>
</button>
<button type="button" class="btnbtn-default">
<span class="glyphiconglyphicon-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
ليست هناك تعليقات:
إرسال تعليق