---
title: "What are the Glyphicons in Bootstrap? How to use it in our Project?"  
description: "What are the Glyphicons in Bootstrap? How to use it in our Project?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93879/what-are-the-glyphicons-in-bootstrap-how-to-use-it-in-our-project  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# What are the Glyphicons in Bootstrap? How to use it in our Project?

What are the Glyphicons in [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)? How to use it in our [Project](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects)?

## Answers

### Answer by Kirti Sharma

Web applications project uses various **icon fonts** that are referred to as Glyphicons in Bootstrap. Glyphicons are **hieroglyphic character or symbols** that are presented as icons font in bootstrap.

Bootstrap provides 260 Glyphicons from the Glyphicons Halflings set.

Some examples of Glyphicons are:

1. Envelope glyphicon
2. Print glyphicon
3. Search glyphicon
4. Download glyphicon etc.

You can use bootstrap glyphicons in your project free of cost by using different Glayphicon classes as follows:

```
<!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.3.6/css/bootstrap.min.css'>  </head>  <body>    <div class='container'>    <h2>Glyphicon Examples</h2>    <p>Envelope icon: <span class='glyphicon glyphicon-envelope'></span></p>        <p>Envelope icon as a link:      <a href='#'><span class='glyphicon glyphicon-envelope'></span></a>    </p>    <p>Search icon: <span class='glyphicon glyphicon-search'></span></p>    <p>Search icon on a button:      <button type='button' class='btn btn-default'>        <span class='glyphicon glyphicon-search'></span> Search      </button>    </p>    <p>Search icon on a styled button:      <button type='button' class='btn btn-info'>        <span class='glyphicon glyphicon-search'></span> Search      </button>    </p>    <p>Print icon: <span class='glyphicon glyphicon-print'></span></p>          <p>Print icon on a styled link button:      <a href='#' class='btn btn-success btn-lg'>        <span class='glyphicon glyphicon-print'></span> Print       </a>    </p>   </div>      <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>  </body>  </html>    
```

**The output of above mentioned project is as follows:** ![What are the Glyphicons in Bootstrap? How to use it in our Project?](https://answers.mindstick.com/QuestionAnswer/1d08ac5a-cd9a-4c76-a50a-75cffac6bb46/images/eb1adc9a-10c2-4c55-9fe8-5ced77cc52fd.jpeg) **\** \


---

Original Source: https://answers.mindstick.com/qa/93879/what-are-the-glyphicons-in-bootstrap-how-to-use-it-in-our-project

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
