Updated June 20, 2023
Introduction to Bootstrap Glyphicons
The Glyphicons are icons of font that are used primarily on 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 free of cost for bootstrap projects. The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. Some texts, forms, buttons, navigation, etc., use glyphicons.
Syntax:
- 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 the 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 are some important glyphicons that 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 implement:
Example #1
This example helps to understand how glyphicons work 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 of the above code: The class = “input-group-addon” is used for icons 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 the Username glyphicon-user class, used 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 be 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 of the above code: We can modify icons according to size using buttons. Here we used the primary button class. We need button class as well as btn-size class to modify icons with the size of buttons. The btn-lg means a large button, and btn-sm means a 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 of 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
Bootstrap glyphicons are icons for form, text, navigation, and other web components. This helps to reduce text and give meaningful information in short.
Recommended Articles
This is a guide to Bootstrap Glyphicons. Here we discuss icons used for form, text, navigation, and many other web components and examples to implement. You can also go through our other related articles to learn more –
