Bootstrap Glyphicons
Objective
Font icons have become increasingly popular due to their benefits. In this tutorial, we will discuss how to use and customize Glyphicons with Bootstrap 3. We will explain the CSS rules that work behind the scenes, which will help you better understand how icon fonts function. This way, you will be familiar with any icon font setup beyond Glyphicons.
What are Glyphicons
Glyphicons are icon fonts used in web projects. Although Glyphicons require a commercial license, you can use these icons for free through Bootstrap for your project. To show appreciation to the icon authors, it is recommended to include a link to the Glyphicon website when using them.
Getting Glyphicons
If you have downloaded Bootstrap 3 (or any version prior to 3) from https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip, you can find the Glyphicons in the fonts folder within the dist folder. There are four files - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, and glyphicons-halflings-regular.woff. The relevant CSS rules are written in the bootstrap.css and bootstrap-min.css files within the css folder in the dist folder.
How to Use Glyphicons
Generally, the common syntax for using Glyphicons with Bootstrap 3 is as follows:
<span class="glyphicon glyphicon-*"></span>
* can be any keyword representing a specific icon. The following example demonstrates how to use it with a button:
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
Example
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar Glyphicons</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>
CSS Rule Explanation
The following CSS rules make up the 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;
}
The @font-face rule actually declares the font-family and location for glyphicons.
The .glyphicon class declares a relative position offset from the top by 1px, renders as inline-block, declares the font, specifies font-style and font-weight as normal, and sets the line-height to 1. Additionally, it uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; for cross-browser consistency.
Then, this:
.glyphicon:empty {
width: 1em;
}
This is an empty glyphicon.
There are 200 classes here, each targeting a specific icon. The common format for these classes is as follows:
.glyphicon-keyword:before {
content: "hexvalue";
}
For example, the user icon used in our example has the following class:
.glyphicon-user:before {
content: "\e008";
}
We have seen how to use it, and now let's look at how to customize Glyphicons.
We will start with the example above and customize the icons by changing the font size, color, and applying text shadows.
Here is the starting code:
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
The effect is shown below:
Customizing Font Size
By increasing or decreasing the font size of the icon, you can make the icon appear larger or smaller.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon-user"></span> User
</button>
Customizing Font 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="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> User
</button>