Glyphicons in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 11667 red flag

Bootstrap is devoloped by Twitter Inc, that is used to design a responsive layout by making the use of its predefined CSS and JavaScript.
Recommendation
Read Working with Lists in Bootstrap before this article.

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. 

Recommendation
Read Working with Forms in Bootstrap part-1 after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Gurumatrix2004 on: 7/18/2014 | Points: 25
Great Article
Posted by: Goud.Kv on: 7/18/2014 | Points: 25
Thank you Gurunath..
Posted by: Sojanya on: 7/9/2015 | Points: 25
In my CSS file, fot-face is written... but files are not loading... any advise.?
Posted by: Goud.Kv on: 7/14/2015 | Points: 25
Hi Sojanya,

Read the below article and include all the links to your webpage.
http://www.dotnetfunda.com/articles/show/2863/introduction-to-bootstrap

Best,
Krishna

Login to post response

Comment using Facebook(Author doesn't get notification)