What are glyphicons in Bootstrap ?

Last Updated : 26 Sep, 2021

Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects. Bootstrap includes 260 glyphicons. These glyphicons used for web project from Bootstrap Glyphicons Halflings Set. Glyphicons Halflings are not available for free of cost, but their creator has made them available for Bootstrap free of cost.

Applications:

To understand more effectively and easily in web projects.
Used for some texts, forms, buttons, navigation, and etc.
To give effective and authentic look of any web project.
To Define anything using it , can easy.

Now let’s see how to use glyphicons 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.

HTML

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

Example 2: In this example, we will use glyphicons along with buttons with different buttons size.

HTML

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