Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

What are glyphicons in Bootstrap ?

  • Difficulty Level : Easy
  • 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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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>

Output:

Bootstrap Glyphicons with different size of buttons 




My Personal Notes arrow_drop_up
Recommended Articles
Page :