Bootstrap Icons

Introduction

In this tutorial, you will learn how to use the Bootstrap 2.0 toolkit to create icons. Bootstrap icons are provided by Glyphicons. If you use these icons in your project, please be sure to provideGlyphiconsthe link.

Use as CSS Sprites

All icon images are bundled together and viabackground-position CSS propertyused. The image file is glyphicons-halflings.png, located in the img folder under the Bootstrap main folder. The styles and background positions of the icons are specified in bootstrap.css from line 1168 to line 1544. Note that to avoid conflicts, all icon classes are prefixed with "icon-". Bootstrap 2.0 defines 120 icon classes.

How to Use Icons on Your Own Site or App

The following is the general syntax for using icons on a site or app:

 <i class="icon_class_name"></i>

Whereicon_class_nameis the name of the icon class defined in bootstrap.css (e.g., icon-music, icon-star, icon-user, etc.).

If you want to use white icons, add an extra icon-white class, as shown below:

<i class="icon_class_name icon-white"></i>  </i>

Add some spaces after it. This may occur when using icons in buttons or some navigation links.If you want to use icons with some strings, remember to

Example: A Search Form

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Example of Using a Search Icon in Bootstrap Version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of using icons in search form - Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style type="text/css">
        form {
            margin-top: 50px;
        }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <form class="well form-search">
                <input type="text" class="input-medium search-query">
<button type="submit" class="btn"><i class="icon-search"></i> Search</button>
            </form>
        </div>
    </div>
    <footer>
        <p>&copy; Company 2013</p>
    </footer>
</div>
</body>
</html>

View Online

View the above example in a different browser window.

Example: Using Icons in Navigation

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Using Icons in Navigation in Bootstrap Version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example icons in navigation with Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>

<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="../index.html">example</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="../index.html"><i class="icon-user icon-white"></i> Home</a></li>
                    <li><a href="../index.html"><i class="icon-user icon-white"></i> User</a></li>
                    <li><a href="../index.html"><i class="icon-download icon-white"></i> Downlaod</a></li>
                    <li><a href="../index.html"><i class="icon-upload icon-white"></i> Upload</a></li>
                    <li><a href="../index.html"><i class="icon-play-circle icon-white"></i> Play Circle</a></li>
                    <li><a href="../index.html"><i class="icon-bookmark icon-white"></i> Bookmark</a></li>
                    <li><a href="../index.html"><i class="icon-gift icon-white"></i> Gift</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

<hr>
</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Place at the bottom of the page to speed up loading -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>

</body>
</html>

View Online

View the above example in a different browser window.

Example: Using Icons in Buttons and Button Groups

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Using Icons in Buttons and Button Groups in Bootstrap Version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of using icons in buttons and button groups - Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style type="text/css">
        form {
            margin-top: 50px;
        }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div class="btn-toolbar" style="margin-bottom: 9px">
                <div class="btn-group">
                    <a class="btn" href="../index.html"><i class="icon-align-left"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-center"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-right"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-justify"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn btn-primary" href="../index.html"><i class="icon-user icon-white"></i> User</a>
                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="../index.html"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="../index.html"><i class="icon-pencil"></i> Edit</a></li>
                        <li><a href="../index.html"><i class="icon-trash"></i> Delete</a></li>
                        <li><a href="../index.html"><i class="icon-ban-circle"></i> Ban</a></li>
                        <li class="divider"></li>
                        <li><a href="../index.html"><i class="i"></i> Make admin</a></li>
                    </ul>
                </div>
            </div>
            <p>
                <a class="btn" href="../index.html"><i class="icon-refresh"></i> Refresh</a>
                <a class="btn btn-success" href="../index.html"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
                <a class="btn btn-danger" href="../index.html"><i class="icon-trash icon-white"></i> Delete</a>
            </p>
            <p>
                <a class="btn btn-large" href="../index.html"><i class="icon-comment"></i> Comment</a>
                <a class="btn btn-small" href="../index.html"><i class="icon-cog"></i> Settings</a>
                <a class="btn btn-small btn-info" href="../index.html"><i class="icon-info-sign icon-white"></i> More Info</a>
            </p>
        </div>
    </div>
</div>
<!-- Le javascript
================================================== -->
<!-- Place at the bottom of the page to speed up loading -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
</body>
</html>

View Online

View the above example in a different browser window.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other Extensions