trainingtrains Logo

91-9990449935

 0120-4256464

JavaTpoint

Bootstrap Glyphicons

Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260 Glyphicons from the Glyphicons Halflings set.

Some examples of Glyphicons are:

  • Envelope glyphicon
  • Print glyphicon
  • Search glyphicon
  • Download glyphicon etc.

Glyphicons Syntax

  1. <span class="glyphicon glyphicon-name"></span>  

To create the desired Glyphicon, the "name" part of the syntax must be replaced accordingly.

For example: If you want to create "envelope" glyphicon, then you must write the following syntax:

  1. <span class="glyphicon glyphicon-envelope"></span>  

Bootstrap Glyphicon Example

Let's take an example to see the different ways to use glyphicons:

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8. </head>  
  9. <body>  
  10.   
  11. <div class="container">  
  12.   <h2>Glyphicon Examples</h2>  
  13.   <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>      
  14.   <p>Envelope icon as a link:  
  15.     <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>  
  16.   </p>  
  17.   <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>  
  18.   <p>Search icon on a button:  
  19.     <button type="button" class="btn btn-default">  
  20.       <span class="glyphicon glyphicon-search"></span> Search  
  21.     </button>  
  22.   </p>  
  23.   <p>Search icon on a styled button:  
  24.     <button type="button" class="btn btn-info">  
  25.       <span class="glyphicon glyphicon-search"></span> Search  
  26.     </button>  
  27.   </p>  
  28.   <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>        
  29.   <p>Print icon on a styled link button:  
  30.     <a href="#" class="btn btn-success btn-lg">  
  31.       <span class="glyphicon glyphicon-print"></span> Print   
  32.     </a>  
  33.   </p>   
  34. </div>  
  35.   
  36.   <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  37.   <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  38. </body>  
  39.   
  40. <!-- Mirrored from www.trainingtrains.com/bootstrap-glyphicon by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:25:29 GMT -->  
  41. </html>  
Test it Now
Next TopicBootstrap Carousel