Bootstrap is devoloped by Twitter Inc, that is used to design a responsive layout by making the use of its predefined CSS and JavaScript.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
We have already seen few Glyphicons in
Bootstrap Lists and let's go in detail with them in here.
Objective
The main objective of this article is to understand Glyphicons and their usage in Bootstrap.
Glyphicons in Bootstrap
There are so many Glyphicons in Bootstrap which are free to use in our web applications. Let's see them in detail. The list of all Bootstrap icons and their class names are
here.
Commonly used Glyphicons:
In most of the web applications, there is a need of creating some icons for Home, Settings, User etc. Bootstrap comes with those type of icons and allows us to use them freely. Following are some of the commonly used Glyphicons,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-home"></span>
<span class="title-class">glyphicon glyphicon-home</span>
</li>
<li>
<span class="glyphicon glyphicon-user"></span>
<span class="title-class">glyphicon glyphicon-user</span>
</li>
<li>
<span class="glyphicon glyphicon-pencil"></span>
<span class="title-class">glyphicon glyphicon-pencil</span>
</li>
<li>
<span class="glyphicon glyphicon-cog"></span>
<span class="title-class">glyphicon glyphicon-cog</span>
</li>
<li>
<span class="glyphicon glyphicon-trash"></span>
<span class="title-class">glyphicon glyphicon-trash</span>
</li>
<li>
<span class="glyphicon glyphicon-search"></span>
<span class="title-class">glyphicon glyphicon-search</span>
</li>
<li>
<span class="glyphicon glyphicon-off"></span>
<span class="title-class">glyphicon glyphicon-off</span>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span>
<span class="title-class">glyphicon glyphicon-globe</span>
</li>
<li>
<span class="glyphicon glyphicon-ok"></span>
<span class="title-class">glyphicon glyphicon-ok</span>
</li>
<li>
<span class="glyphicon glyphicon-remove"></span>
<span class="title-class">glyphicon glyphicon-remove</span>
</li>
</ul>Don't get confused with above classes i.e. glyphicon-container-list, title-class etc. because those are styles written to arrange them in below manner.
In the above code observe how we are using a Glyphicon, These icons will look like,
Arithmetic and Currency Icons:
There are some icons such as
plus,
minus etc. which are arithmetic and
dollar,
euro i.e. currency ones.
Below code helps you how to use them in your web application.
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-plus"></span>
<span class="title-class">glyphicon glyphicon-plus</span>
</li>
<li>
<span class="glyphicon glyphicon-minus"></span>
<span class="title-class">glyphicon glyphicon-minus</span>
</li>
<li>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="title-class">glyphicon glyphicon-asterisk</span>
</li>
<li>
<span class="glyphicon glyphicon-euro"></span>
<span class="title-class">glyphicon glyphicon-euro</span>
</li>
<li>
<span class="glyphicon glyphicon-usd"></span>
<span class="title-class">glyphicon glyphicon-usd</span>
</li>
</ul>This looks like as same code as we seen above and the difference is the change of icons.
These icons are seen as following in your webpage,
Sign Icons:
Bootstrap has some predefined Sign icons. Some of them are,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="title-class">glyphicon glyphicon-plus-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-sign"></span>
<span class="title-class">glyphicon glyphicon-remove-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="title-class">glyphicon glyphicon-ok-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="title-class">glyphicon glyphicon-question-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="title-class">glyphicon glyphicon-info-sign</span>
</li>
</ul>These icons looks like,
Chevron Icons:
Chevron icons means direction icons.
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="title-class">glyphicon glyphicon-chevron-left</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="title-class">glyphicon glyphicon-chevron-right</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="title-class">glyphicon glyphicon-chevron-up</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="title-class">glyphicon glyphicon-chevron-down</span>
</li>
<li>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="title-class">glyphicon glyphicon-fullscreen</span>
</li>
</ul>These icons represents smart directions as below,
Gallery Icons:
There are some Gallery clip arts in Bootstrap which are used in Gallery menus such as Audio, Video, Images etc.
Some of them are,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-music"></span>
<span class="title-class">glyphicon glyphicon-music</span>
</li>
<li>
<span class="glyphicon glyphicon-film"></span>
<span class="title-class">glyphicon glyphicon-film</span>
</li>
<li>
<span class="glyphicon glyphicon-picture"></span>
<span class="title-class">glyphicon glyphicon-picture</span>
</li>
<li>
<span class="glyphicon glyphicon-camera"></span>
<span class="title-class">glyphicon glyphicon-camera</span>
</li>
<li>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="title-class">glyphicon glyphicon-facetime-video</span>
</li>
</ul>In the above code, we are using some icons related to Gallery elements which gives us the following output,
Music Icons:
Bootstrap gives us some Music icons which helps a lot in creating any music playing websites. They are,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="title-class">glyphicon glyphicon-step-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="title-class">glyphicon glyphicon-fast-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-backward"></span>
<span class="title-class">glyphicon glyphicon-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-play"></span>
<span class="title-class">glyphicon glyphicon-play</span>
</li>
<li>
<span class="glyphicon glyphicon-pause"></span>
<span class="title-class">glyphicon glyphicon-pause</span>
</li>
<li>
<span class="glyphicon glyphicon-stop"></span>
<span class="title-class">glyphicon glyphicon-stop</span>
</li>
<li>
<span class="glyphicon glyphicon-forward"></span>
<span class="title-class">glyphicon glyphicon-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="title-class">glyphicon glyphicon-fast-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="title-class">glyphicon glyphicon-step-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-eject"></span>
<span class="title-class">glyphicon glyphicon-eject</span>
</li>
</ul>These Glyphicons will result in following output,
Typography Icons:
There are some typography (aligning and setting properties) icons in Bootstrap. Some of them are,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-font"></span>
<span class="title-class">glyphicon glyphicon-font</span>
</li>
<li>
<span class="glyphicon glyphicon-text-height"></span>
<span class="title-class">glyphicon glyphicon-text-height</span>
</li>
<li>
<span class="glyphicon glyphicon-text-width"></span>
<span class="title-class">glyphicon glyphicon-text-width</span>
</li>
<li>
<span class="glyphicon glyphicon-align-left"></span>
<span class="title-class">glyphicon glyphicon-align-left</span>
</li>
<li>
<span class="glyphicon glyphicon-align-center"></span>
<span class="title-class">glyphicon glyphicon-align-center</span>
</li>
<li>
<span class="glyphicon glyphicon-align-right"></span>
<span class="title-class">glyphicon glyphicon-align-right</span>
</li>
<li>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="title-class">glyphicon glyphicon-align-justify</span>
</li>
<li>
<span class="glyphicon glyphicon-list"></span>
<span class="title-class">glyphicon glyphicon-list</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="title-class">glyphicon glyphicon-indent-left</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="title-class">glyphicon glyphicon-indent-right</span>
</li>
</ul>These are used very rarely. They looks like below in your browser,
Arrow Icons:
Let's see some arrow icons of Bootstrap which are freely usable in our applications.
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="title-class">glyphicon glyphicon-arrow-left</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="title-class">glyphicon glyphicon-arrow-right</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="title-class">glyphicon glyphicon-arrow-up</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="title-class">glyphicon glyphicon-arrow-down</span>
</li>
<li>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="title-class">glyphicon glyphicon-share-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="title-class">glyphicon glyphicon-resize-full</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="title-class">glyphicon glyphicon-resize-small</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="title-class">glyphicon glyphicon-resize-vertical</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="title-class">glyphicon glyphicon-resize-horizontal</span>
</li>
<li>
<span class="glyphicon glyphicon-transfer"></span>
<span class="title-class">glyphicon glyphicon-transfer</span>
</li>
</ul>These icons are mostly used in Pagination's, Pager's etc. Above code will shows you following icons in your browser,
Clip Art Icons:
Bootstrap consists of some predefined clip arts which are made into Glyphicons. These are used in many places to beautify the layout.
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-heart"></span>
<span class="title-class">glyphicon glyphicon-heart</span>
</li>
<li>
<span class="glyphicon glyphicon-star"></span>
<span class="title-class">glyphicon glyphicon-star</span>
</li>
<li>
<span class="glyphicon glyphicon-flag"></span>
<span class="title-class">glyphicon glyphicon-flag</span>
</li>
<li>
<span class="glyphicon glyphicon-phone-alt"></span>
<span class="title-class">glyphicon glyphicon-phone-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-leaf"></span>
<span class="title-class">glyphicon glyphicon-leaf</span>
</li>
<li>
<span class="glyphicon glyphicon-plane"></span>
<span class="title-class">glyphicon glyphicon-plane</span>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="title-class">glyphicon glyphicon-shopping-cart</span>
</li>
<li>
<span class="glyphicon glyphicon-bell"></span>
<span class="title-class">glyphicon glyphicon-bell</span>
</li>
<li>
<span class="glyphicon glyphicon-phone"></span>
<span class="title-class">glyphicon glyphicon-phone</span>
</li>
<li>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="title-class">glyphicon glyphicon-bullhorn</span>
</li>
</ul>In the above code, we are using some clip arts that may look like below,
Thumb Icons:
There are some thumb icons which are frequently used in social plugins. They are,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="title-class">glyphicon glyphicon-thumbs-up</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="title-class">glyphicon glyphicon-hand-right</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="title-class">glyphicon glyphicon-hand-left</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="title-class">glyphicon glyphicon-hand-up</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="title-class">glyphicon glyphicon-hand-down</span>
</li>
</ul>These thumb glyphicons represents the following icons in your browser,
Circle Icons:
There some icons designed with circular background in Bootstrap. Let's see using some of them below,
<ul class="glyphicons-container-list">
<li>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="title-class">glyphicon glyphicon-circle-arrow-right</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="title-class">glyphicon glyphicon-circle-arrow-left</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="title-class">glyphicon glyphicon-circle-arrow-up</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="title-class">glyphicon glyphicon-circle-arrow-down</span>
</li>
<li>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="title-class">glyphicon glyphicon-ban-circle</span>
</li>
</ul>These icons are mostly used in side tabs and down tabs.
There are so many glyphicons (200) in Bootstrap in which we have seen some of them. If you want to study all of them, please check them in Bootstrap's Glyphicons.
Conclusion
In this article, we have seen some Glyphicons of Bootstrap. Hope you understand. If you have any doubts in this topic, please feel free to ask in the below comments.
Thanks for reading.
Regards,
Krishna.