Table of contents
1.
Introduction
2.
Glyphicons
3.
Where to find Glyphicons
4.
How to use Glyphicons
4.1.
Syntax
5.
Examples
5.1.
Icons
5.2.
Links
5.3.
Alerts
6.
Applications of Glyphicons
7.
Frequently Asked Questions
7.1.
What are bootstrap glyphicons?
7.2.
Can I use glyphicons in bootstrap 4 and bootstrap 5?
7.3.
Can I change the color and size of glyphicons?
7.4.
Does bootstrap have a built-in icon library?
7.5.
Is there any other library to use icons similar to glyphicons besides bootstrap?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap - Glyphicons

Author Rhythm Jain
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

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.

OG image

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 Setwhich includes 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

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. 

<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>


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>


Output

Example using text

 

Example 2

<!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: brown;">Given below are some glyphicon examples using buttons :</p>
            <hr>
            <!-- 
                Inserting Glyphicons in buttons using span.
            -->
            
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-user"> </span>User
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-home"></span> Home
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-search"></span> Search
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-star"> </span> Star
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-cloud"> </span> Cloud
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-headphones"> </span> Headphones
            </button>
            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-play"> </span> Play

            <button type="button" class="btn btn-default btn-md">
                <span class="glyphicon glyphicon-apple"> </span> Apple
            </button>
        </div>
    </body>
  
</html>

    

Output

Example using buttons

Links

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

Links Example

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

Alert Example


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:

  1. Basic set
  2. Halflings set
  3. Filetypes set
  4. Smileys set
  5. Humans set
  6. Mind set
  7. Weather set
  8. Camera set
  9. Contagion set
  10.  Arrows set

Applications of Glyphicons

Applications of Glyphicons

The glyphicons have the following applications:

  1. To create web projects that are more appealing and authentic.
  2. It can be used to define some terms more clearly.
  3. It is used for texts, buttons, links, navigations etc. and thus has a wide range of usability.

Also Read About, javascript replace

Frequently Asked Questions

What are bootstrap glyphicons?

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.

Check this out - Bootstrap Accordion

Conclusion

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 on Coding Ninjas Studio now!

Happy Learning! 

 

Live masterclass