How to develop website by twitter bootstrap Part 3

Published on : August 12, 2014

Author: wahid

Category: HTML5

Bootstrap Tutorial :: Part 3

In this tutorial we describe how to create icon using twitter bootstrap. Twitter bootstrap icons are provided by Glyphicons

All Glyphicons images are bundled into one. glyphicons-halflings.png resides under img folder of the main bootstrap folder. There are 120 icon classes defined in twitter bootstrap version2.0.

How to use icons in your own site or app ::

Basic syntax to use twitter bootstrap icon

[sourcecode]</pre>
<i class="icon_class_name"></i>
<pre>[/sourcecode]

Where “ icon_class_name” is the name of icon class such as icon-music, icon-star etc. This icon classes are defined in bootstrap.css. Now if you want to use white icon you need to add one extra class “icon-white”.

[sourcecode]</pre>
<i class="icon_class_name icon-white"></i>
<pre>[/sourcecode]

Lets have a look on a full example:

Code ::

[sourcecode]</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>BOOTSTRAP ICON TUTORIAL</title>

</head>

<body>

<div>

<button type="submit" class="btn"><i></i> Search</button>

</form>

</div>

</body>

</html>
<pre>[/sourcecode]

Output ::

Now you can try yourself how to use icons using twitter bootstrap. We think this article will help you to use twitter bootstrap icons. We will discuss more about twitter bootstrap in our next tutorial .

Thank You