Bootstrap Glyphicons are a set of small, glyph-based icons that enhance user interfaces. They offer a variety of symbols for common actions and elements, allowing for improved visual representation and functionality in web applications.
Applications:
- To understand more effectively and easily in web projects.
- Used for some texts, forms, buttons, navigation, and etc.
- To give an effective and authentic look to any web project.
- To Define anything using it, can be easy.
Now let's see how to use glyph icons in Bootstrap
Approach: To use the Glyphicons icon in Bootstrap, use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding like:
<span class = "glyphicon glyphicon-search"></span>Include Bootstrap3 and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Example 1: In this example, we will see glyphicons in bootstrap and how to use it along within a webpage.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap Glyphicons Examples</h1>
<p>
Here are some glyphicons examples
which shows different icons:-
</p>
<span class="glyphicon glyphicon-home"></span> Home<br>
<span class="glyphicon glyphicon-search"></span> Search<br>
<span class="glyphicon glyphicon-user"> </span>User<br>
<span class="glyphicon glyphicon-lock"> </span> Lock
</div>
</body>
</html>
Output:
Bootstrap Glyphicons Example Output
Example 2: In this example, we will use glyphicons along with buttons with different buttons size.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap Glyphicons Examples</h1>
<p>
Here are some glyphicons along with
buttons with different buttons size:-
</p>
<p>
Home Icon <span class=
"glyphicon glyphicon-home"></span><br>
</p>
<p>
Search Icon <span class=
"glyphicon glyphicon-search"></span> <br>
</p>
<p>Home Icon along with small button
<button type="button"
class="btn btn-sm btn-primary">
<span class="glyphicon
glyphicon-home"></span> Home
</button>
</p>
<p>Search Icon along with small button
<button type="button"
class="btn btn-sm btn-primary">
<span class="glyphicon
glyphicon-search"></span> Search
</button>
</p>
<p>Home Icon along with button
<button type="button"
class="btn btn-danger">
<span class="glyphicon
glyphicon-home"></span> Home
</button>
</p>
<p>Search Icon along with button
<button type="button"
class="btn btn-danger">
<span class="glyphicon
glyphicon-search"></span> Search
</button>
</p>
<p>Home Icon along with long button
<button type="button"
class="btn btn-lg btn-success">
<span class="glyphicon
glyphicon-home"></span> Home
</button>
</p>
<p>Search Icon along with long button
<button type="button"
class="btn btn-lg btn-success">
<span class="glyphicon
glyphicon-search"></span> Search
</button>
</p>
</div>
</body>
</html>
Output:
Bootstrap Glyphicons Example Output