Introduction to Bootstrap Glyphicons
The Glyphicons are icons of font which is used mostly in web applications. The Glyphicons Halflings set has 250 glyphs but this is not free of cost. To get icons, we need a license. The Glyphicons Halflings creator made these icons are free of cost for bootstrap projects. The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. The Glyphicons are used for some texts, forms, buttons, navigation, and etc.
Syntax:
- The bootstrap has many Glphyicons but there has a standard format to display icons.
- The bootstrap glyphicons syntax is following;
<span class = "glyphicon glyphicon-name"> </span>- In the syntax “name” is changed with the name of glyphicon.
What is Bootstrap Glyphicons?
Bootstrap Glyphicons help to get clean symbols about information. It helps to understand the content easily. The following size of glyphicons may vary according to requirement. The following some important glyphicons which are used commonly in web applications:
| Syntax | Icons |
| <span class = “glyphicon glyphicon-asterisk”></span> |
 |
| <span class = “glyphicon glyphicon-plus”> </span> |
 |
| <span class = “glyphicon glyphicon-minus”></span> |
 |
| <span class = “glyphicon glyphicon-euro”> </span> |
 |
| <span class = “glyphicon glyphicon-cloud”> </span> |
 |
| <span class = “glyphicon glyphicon-envelope”> </span> |
 |
| <span class = “glyphicon glyphicon-pencil”> </span> |
 |
| <span class = “glyphicon glyphicon-glass”> </span> |  |
| <span class = “glyphicon glyphicon-music”> </span> |  |
| <span class = “glyphicon glyphicon-search”> </span> |
 |
| <span class = “glyphicon glyphicon-heart”> </span> |
 |
| <span class = “glyphicon glyphicon-menu-left”> </span> |
 |
| <span class = “glyphicon glyphicon-menu-right”> </span> |
 |
| <span class = “glyphicon glyphicon-menu-down”> </span> |
 |
| <span class = “glyphicon glyphicon-menu-up”> </span> |
 |
| <span class = “glyphicon glyphicon-triangle-left”> </span> |
 |
| <span class = “glyphicon glyphicon-triangle-bottom”> </span> |
 |
| <span class = “glyphicon glyphicon-triangle-top”> </span> |
 |
| <span class = “glyphicon glyphicon-triangle-right”> </span> |
 |
| <span class = “glyphicon glyphicon-usd”> </span> |
 |
| <span class = “glyphicon glyphicon-gbp”> </span> |
 |
| <span class = “glyphicon glyphicon-sort-by-alphabet”> </span> |
 |
| <span class = “glyphicon glyphicon-sort-by-order”> </span> |
 |
| <span class = “glyphicon glyphicon-phone”> </span> |
 |
| <span class = “glyphicon glyphicon-link”> </span> |
 |
| <span class = “glyphicon glyphicon-briefcase”> </span> |
 |
| <span class = “glyphicon glyphicon-filter”> </span> |
 |
| <span class = “glyphicon glyphicon-star”> </span> |
 |
| <span class = “glyphicon glyphicon-star-empty”> </span> |
 |
| <span class = “glyphicon glyphicon-user”> </span> |
 |
| <span class = “glyphicon glyphicon-film”> </span> |
 |
| <span class = “glyphicon glyphicon-ok”> </span> |
 |
| <span class = “glyphicon glyphicon-remove”> </span> |
 |
| <span class = “glyphicon glyphicon-zoom-in”> </span> |
 |
| <span class = “glyphicon glyphicon-zoom-out”> </span> |
 |
| <span class = “glyphicon glyphicon-off”> </span> |
 |
| <span class = “glyphicon glyphicon-signal”> </span> |
 |
| <span class = “glyphicon glyphicon-trash”> </span> |
 |
| <span class = “glyphicon glyphicon-home”> </span> |
 |
| <span class = “glyphicon glyphicon-cog”> </span> |
 |
| <span class = “glyphicon glyphicon-file”> </span> |
 |
| <span class = “glyphicon glyphicon-time”> </span> |
 |
| <span class = “glyphicon glyphicon-download”> </span> |
 |
| <span class = “glyphicon glyphicon-upload”> </span> |
 |
| <span class = “glyphicon glyphicon-play-circle”> </span> |
 |
| <span class = “glyphicon glyphicon-repeat”> </span> |
 |
| <span class = “glyphicon glyphicon-refresh”> </span> |
 |
| <span class = “glyphicon glyphicon-lock”> </span> |
 |
| <span class = “glyphicon glyphicon-headphones”> </span> |
 |
| <span class = “glyphicon glyphicon-volume-off”> </span> |
 |
| <span class = “glyphicon glyphicon-volume-down”> </span> |
 |
| <span class = “glyphicon glyphicon-volume-up”> </span> |
 |
| <span class = “glyphicon glyphicon-print”> </span> |
 |
| <span class = “glyphicon glyphicon-camera”> </span> |
 |
| <span class = “glyphicon glyphicon-map-marker”> </span> |
 |
| <span class = “glyphicon glyphicon-play”> </span> |
 |
| <span class = “glyphicon glyphicon-pause”> </span> |
 |
| <span class = “glyphicon glyphicon-stop”> </span> |
 |
Examples to Implement Bootstrap Glyphicons
Below are the examples to implements:
Example #1
This example helps to understand how to glyphicons works in web projects.
Code:
<!DOCTYPE>
<html>
<head>
<title> Bootstrap Glyphicons 1 </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h2> Signup Form </h2>
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<input type="submit" class="btn btn-default" >
</div>
</form>
</body>
</html>Output:
Explanation to the above code: The class = “input-group-addon” is used for icons that are placed next to the input field attribute. We are using icons for form format. The form can look attractive and meaningful. Every input field has a meaning like username, password, and email. For Username glyphicon-user class used in vertically. The password and email used glyphicon-envelop and glyphicon-lock respectively.
Example #2
We can use glyphicons according to the required size. The icon Size can large, small, extra small, and default. Show in the following example.
Code:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<hr>
<button type = "button" class = "btn btn-primary btn-xs">
<span class = "glyphicon glyphicon-camera"></span> Photo
</button>
<hr>
<button type = "button" class = "btn btn-primary btn-sm">
<span class = "glyphicon glyphicon-camera"></span>
Photo
</button>
<hr>
<button type = "button" class = "btn btn-primary ">
<span class = "glyphicon glyphicon-camera"></span>
Photo
</button>
<hr>
<button type ="button" class = "btn btn-primary btn-lg">
<span class = "glyphicon glyphicon-camera"></span>
Photo
</button>
<hr>
</body>
</html>Output:
Explanation to the above code: Using buttons we can modify icons according to size. Here we used the primary button class. We need button class as well btn-size class to modify icons with the size of buttons. The btn-lg means a large button as like btn-sm means small button.
Example #3
The Bootstrap glyphicons with CSS example is below.
Code:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
#icon1 {
color: blue;
font-size: 30px;
border: 1px solid black;
margin-left: 10px;
background-color: yellow;
}
#icon2 {
color: orange;
font-size: 30px;
margin-left: 10px;
}
#icon3 {
color: red;
font-size: 30px;
margin-left: 10px;
}
#icon4 {
color: silver;
background-color : black;
font-size: 30px;
margin-left: 10px;
}
</style>
</head>
<body>
<hr>
<span id= "icon1" class = "glyphicon glyphicon-camera"></span> Photo
<hr>
<span id= "icon2" class = "glyphicon glyphicon-envelope"></span>
Email
<hr>
<span id= "icon3" class = "glyphicon glyphicon-heart"></span>
Heart
<hr>
<span id= "icon4" class = "glyphicon glyphicon-star"></span>
Star
<hr>
</body>
</html>Output:
BEFORE
After
Explanation to the above code: You can see the difference between after and before icons. Using CSS we can change the size, color, background-color, margin, etc.
Conclusion
The bootstrap glyphicons are an icon used for form, text, navigation and many other web components. This helps to reduce text and give meaningful information in short.