Glyphicons with Twitter Bootstrap 3

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Objective

Font Icons are becoming more and more popular because of a number of benefits. In this tutorial, we will discuss how to use and customize Glyphicons with Twitter Bootstrap 3. We will also explain the CSS rules work behind, which will give you a better idea of how icon fonts work in general. So that, you become conversant with working any icon font set besides Glyphicons.

What is Glyphicons

Glyphicons are icon fonts which you can use in your web projects. Though you need commercial licensing for using Glyphicons, but you can use them with Twitter Bootstrap based projects for free. Only thing is, it is recommended that you shall provide a link back to the Glyphicon website.

Obtaining Glyphicons

If you have downloaded Bootstrap 3 from https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip (or any previous 3x version), you may find glyphicons within fonts folder within dist folder. There are four files - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff. Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within css folder of dist folder.

How to use

In general, we may derive that common syntax for using Glyphicons with Bootstrap 3 is following

<span class="glyphicon glyphicon-*"></span>

Where * is any of the many keywords each representing a specific icon. The following example shows how to use it with the button.

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

You may view a live demo of the example here

Glyphicon with navbar

<!DOCTYPE html>
<html>
  <head>
    <title>Using Glyphicons with Navbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

Live demo

Explanation of CSS rules behind

Following CSS rules constitute glyphicon class

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

So the font face rule actually declares font-family and locations where glyphicons found.

.glyphicon class declares a relative position 1px from the top, it is rendered as inline-block, declares font family, states font style and weight both are normal, sets line height as 1. Besides, it uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; which are used for achieving cross-browser consistency.

Then there is

.glyphicon:empty {
  width: 1em;
}

For empty glyphicon.

After this, there are 200 classes each for one icon. Common Format of those classes is as follows

.glyphicon-keyword:before {
  content: "hexvalue";
}

For example, for user icon used in our example, the class is as follows

.glyphicon-user:before {
  content: "\e008";
}

Now we have seen how to use it, we will see how to customize the Glyphicons.

We will start with our previous example and make customization by changing font size, color and applying text shadow to make the icon look different.

Following is the code we will start with

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

And here is how it looks

Customizing font size

By increasing or decreasing the font size of the icons, you can make the icons look bigger or smaller.

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Customizing color

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Applying text shadow

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Hope this will get started with using and customizing Glyphicons with your Twitter Bootstrap based projects.

Questions? Suggestions? Join the discussion below. For the upcoming tutorials, please subscribe to our Feed.

Previous: Twitter Bootstrap Typography tutorial
Next: Twitter Bootstrap Tables tutorial