What are glyphicons in Bootstrap ?

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>
Output:
Bootstrap Glyphicons with different size of buttons 
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property