How to use glyphicons in bootstrap 3?
April 25, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use glyphicons in bootstrap 3 with code example.
Here, we will use .glyphicon glyphicon-pencil class to make a use glyphicons.
Glyphicons are icon fonts that can be used in a variety of web applications. They are a set of visual icons, symbols, and fonts provided by Bootstrap.
Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260 Glyphicons from the Glyphicons Halflings set.
Some examples of Glyphicons are:
- Pencil glyphicon
- Home glyphicon
- Lock icon glyphicon etc.
Example
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Pencil icon as a link:
<a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
</p>
<p>Home icon on a button:
<button type="button" class="btn btn-secondary">
<span class="glyphicon glyphicon-home"></span> Home
</button>
</p>
<p>Refresh icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</button>
</p>
<p>Lock icon: <span class="glyphicon glyphicon-lock"></span></p>
Lock <a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-lock"></span> Lock
</a>
</p>
</div>
</body>
</html>In the above code, we have used .glyphicons class to use glyphicons in bootstrap
Check the output of the above code example.
All the best 👍
