Twitter Bootstrap - Icons Tutorials

on
In this tutorial, you will learn how to create icons using Twitter Bootstrap toolkit Version 2.0. Twitter Bootstrap icons are provided by Glyphicons. If you are using these icons in your own project, please make sure to offer link and credit to Glyphicons.

Used as a CSS Sprite

All Icon images are bundled into one and used with background-position CSS property. The image file is glyphicons-halflings.png and it resides under img folder of the main Twitter Bootstrap folder. Styles (and background positions) of icons are specified form line number 1168 to 1544 of bootstrap.css.
Note that all of the icon classes are prefixed with "icon-" to avoid conflict. There are 120 icon classes defined in Twitter Bootstrap Version2.0.

 

How to use icons in your own site or app

Here is the general syntax for using icons in your site or app:
<i class="icon_class_name"></i>
Where "icon_class_name" is the name of the icon class (e.g. icon-music, icon-star, icon-user etc.) defined in bootstrap.css.
If you are planning to use white icons, then add an additional icon-white class along with the icon class like this:
<i class="icon_class_name icon-white"></i>
Remember to add some space after the , if you are using icons along with some some strings. This may occur if you are using icons in a button or some navigational links.

 

Example: a search form 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of using icons in search form - Twitter 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 - Twitter Bootstrap version 2.0 from bloggerhelp24.blogspot.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" 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="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </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>© Company 2012</p>
      </footer>
    </div>
</body>
</html>

 

Example: using icons in navigation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example icons in navigation with Twitter Bootstrap version 2.0 from bloggerhelp24.blogspot.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example icons in navigation with Twitter Bootstrap version 2.0 from bloggerhelp24.blogspot.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" 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="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </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="#">bloggerhelp24</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#"><i class="icon-user icon-white"></i> Home</a></li>
              <li><a href="#about"><i class="icon-user icon-white"></i> User</a></li>
              <li><a href="#about"><i class="icon-download icon-white"></i> Downlaod</a></li>
              <li><a href="#about"><i class="icon-upload icon-white"></i> Upload</a></li>
              <li><a href="#about"><i class="icon-play-circle  icon-white"></i> Play Circle</a></li>
              <li><a href="#about"><i class="icon-bookmark  icon-white"></i> Bookmark</a></li>
              <li><a href="#about"><i class="icon-gift icon-white"></i> Gift</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

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

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

 

Example: using icons in buttons and button groups 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of using icons in buttons and button groups - Twitter 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 - Twitter Bootstrap version 2.0 from bloggerhelp24.blogspot.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" 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="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </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="#"><i class="icon-align-left"></i></a>
          <a class="btn" href="#"><i class="icon-align-center"></i></a>
          <a class="btn" href="#"><i class="icon-align-right"></i></a>
          <a class="btn" href="#"><i class="icon-align-justify"></i></a>
        </div>
        <div class="btn-group">
          <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
          </ul>
        </div>
      </div>
      <p>
        <a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
        <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
        <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a>
      </p>
      <p>
        <a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a>
        <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
        <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
      </p>
    </div>
       </div>
    </div>
     <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>

Comments

Post a Comment