Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
Glyphicons! Sounds fancy. If you don't know what they exactly are and how to use them in your code, don’t worry, we got you.
In this article, we’ll discuss Glyphicons to help you get started and get familiar with them.
Glyphicons
Glyphicons are monochromatic icons and symbols that can be used in bootstrap projects. These are taken from Bootstrap Glyphicons Halflings Set, whichincludes 260 glyphicons. Usually, Glyphicons Halflings are not free, but the creator made them accessible exclusively for bootstrap. The glyphicons are used for text, forms, buttons, toolbars, navigation, and other web components. These icons help us reduce the text and deliver the information shortly and efficiently.
Where to find Glyphicons
If you want to add bootstrap glyphicons to your project, you can follow the given below ways:
Copy and Paste these links into your head section <head> section of the code.
This will include the Bootstrap and jQuery CDN into the <head> tag before to load our CSS. After having the above links, we can start using glyphicons directly.
How to use Glyphicons
To use glyphicons in your code, you must add the classes .glyphicon and .glyphicon-<NameofAnyIcon>. Here’s the code for a few icons for your better understanding. The glyphicons can be used as icons, buttons, links, alert components, navigation, etc.
Syntax
<span class="glyphicon glyphicon-name"></span>
Replace the name part with the proper glyphicon name you want to use.
Examples
Now we will see a few examples to get you started.
Icons
We can use glyphicons to insert relevant icons for our Text and Buttons.
Example 1
<!DOCTYPE html>
<html>
<head>
<!--
Including Headers
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Offline Bootstrap</title>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
Given below are some glyphicon examples:
<br>
<hr>
<!--
Inserting Glyphicons using span.
-->
<span class="glyphicon glyphicon-user"> </span>User
<br>
<span class="glyphicon glyphicon-home"></span> Home
<br>
<span class="glyphicon glyphicon-search"></span> Search
<br>
<span class="glyphicon glyphicon-star"> </span> Star
<br>
<span class="glyphicon glyphicon-cloud"> </span> Cloud
<br>
<span class="glyphicon glyphicon-headphones"> </span> Headphones
<br>
<span class="glyphicon glyphicon-play"> </span> Play
<br>
<span class="glyphicon glyphicon-apple"> </span> Apple
</div>
</body>
</html>
We can also use glyphicons while creating links:
<!DOCTYPE html>
<html>
<head>
<!--
Including Headers
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Offline Bootstrap</title>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
<p style="color:darkslateblue;">Given below are some glyphicon examples using links :</p>
<hr>
<!--
Inserting Glyphicons in links using span.
-->
<a href="#">
<span class="glyphicon glyphicon-user"> </span>User
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-search"></span> Search
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-star"> </span> Star
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-cloud"> </span> Cloud
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-headphones"> </span> Headphones
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-play"> </span> Play
<br>
</a>
<a href="#">
<span class="glyphicon glyphicon-apple"> </span> Apple
<br>
</a>
</div>
</body>
</html>
Output
Alerts
<!DOCTYPE html>
<html>
<head>
<!--
Including Headers
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Offline Bootstrap</title>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
<p style="color:red ;">Given below is a glyphicon examples using Alerts :</p>
<hr>
<!--
Inserting Glyphicons in Alerts.
-->
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address!
</div>
</div>
</body>
</html>
Output
There are different types of glyphicon sets available for usage in bootstrap for free, but developers in need of glyphicons can purchase the license and use them in their projects. The sets currently available are:
Basic set
Halflings set
Filetypes set
Smileys set
Humans set
Mind set
Weather set
Camera set
Contagion set
Arrows set
Applications of Glyphicons
The glyphicons have the following applications:
To create web projects that are more appealing and authentic.
It can be used to define some terms more clearly.
It is used for texts, buttons, links, navigations etc. and thus has a wide range of usability.
Bootstrap glyphicons are a set of symbols and icons that are from the Glyphicon Halflings set. These require licenses, but the creator has made them accessible for bootstrap.
Can I use glyphicons in bootstrap 4 and bootstrap 5?
Bootstrap glyphicons are not supported in these versions anymore for free. But there are other free icons, like font awesome icons, which you can use in bootstrap.
Can I change the color and size of glyphicons?
Yes, you can change the size, color, and all other styling properties of glyphicons using CSS styling properties.
Does bootstrap have a built-in icon library?
Bootstrap 4 and bootstrap 5 have built-in icon libraries. For bootstrap 3, you must use glyphicons in order to use icons.
Is there any other library to use icons similar to glyphicons besides bootstrap?
Yes, you can use ‘font awesome’ or ‘google material design icons’ for the same.
Let’s discuss what we learned in this article briefly about glyphicons. We learned that Bootstrap 3 provides us with a set of icon fonts that are free to use only with bootstrap. These are called Bootstrap Glyphicons. Glyphicons can be used as buttons, links, forms, navigation, dropdowns, and all other components where icons are necessary.
Hey Ninjas! Experiment with glyphicons and create fantastic projects using them. We found the perfect course for you to enhance your development skills in web development. Check this out and become the best developer.
Are you planning to ace the interviews with reputed product-based companies like Amazon, Google, Microsoft, and more? Attempt our Online Mock Test Series onCoding Ninjas Studionow!