In the present days, font icons are becoming more popular for better user experience. This tutorial explains how to use and customize Glyphicons with Bootstrap. Glyphicons is a collection of monochromatic icons and symbols recognized by most of the people which help them to identify easily links and information on your site. Glyphicons are icon fonts which are based on CSS sprites, in which we can create icons of any color just applying the CSS color property on the specified element.
also read:
Glyphicons are not available free, but the creator has made them available for Bootstrap free of cost. We can get number of available Glyphicons at this link Glyphicons Website. When we download Bootstrap, extract the zip file, and we will find file structure of the Bootstrap. We may find glyphicons within fonts folder within dist folder. It contains following four files:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
The bootstrap.css and bootstrap-min.css files are present within the CSS folder of dist folder.
Using of icons in the code
We can use bootstrap icons along with <span> tag with base class glyphicon and individual icon glyphicon-*, where * indicates keyword with specific icon name. The syntax is as follows:
<span class=”glyphicon glyphicon-*”></span>
For instance:
<button type=”button” class=”btn btn-primary”> <span class=”glyphicon glyphicon-music”></span>Music</button>
The glyphicon glyphicon-music is the name of particular icon class defined in bottstrap.css. They should not be used with other classes and use <span> tag and apply the icon classes to the <span> .
Glyphicons Example
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" type="text/css" href="myclass.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Glyphicon Icons</h2> <span class="glyphicon glyphicon-envelope"></span>: Email Icon<br><br> <span class="glyphicon glyphicon-phone"></span>: Phone Icon<br><br> <span class="glyphicon glyphicon-music"></span>: Music Icon<br><br> <span class="glyphicon glyphicon-home"></span>: Home Icon <br><br> <span class="glyphicon glyphicon-time"></span>: Time Icon </div> </body> </html>
Above script defines different types glyphicon icons such as email, phone, music, home and time icons used within the span element. The span element contains base class glyphicon and glyphicon-envelope is the name of the particular icon class and same as to all other glyphicon icon classes.
Customizing Glyphicon Icons
We can also customize the Glyphicons such as larger size, smaller size and extra smaller size by using btn-lg, btn-sm and btn-xs respectively within the button element. The following is an example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon icons with large size</h2>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span>: User Icon</button><br><br>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-headphones"></span>: Headphone Icon</button><br><br>
<h2>Glyphicon icons with small size</h2>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-camera"></span>: Camera Icon</button><br><br>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-comment"></span>: Comment Icon </button><br><br>
<h2>Glyphicon icons with extra small size</h2>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-earphone"></span>: Earphone Icon</button><br><br>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-repeat"></span>: Repeat Icon </button>
</div>
</body>
</html>
Above script defines how to display Glyphicon icons with different sizes on the web page. The class btn btn-default btn-lg is used to display icons with larger size, btn btn-default btn-sm class displays icons with smaller size and btn btn-default btn-xs class displays the icons with extra smaller size and all these classes would be defined within the button element.
Leave a Reply