Bootstrap Glyphicons

In the past few years the icons got an important part of the web pages we got used to both viewing and creating. With the clean and symbolic instinctive meanings they almost immediately relay it became much easier to set a focus point, showcase, or explain a particular point without loading spending.

Bootstrap provides 260 glyphicons  from the Glyphicons Halflings set.

some examples of glyphicons are:

• Search glyphicon
• Download glyphicon
• Lock glyphicon
• Headphones glyphicon
• Play glyphicon

Glyphicon Syntax:

<span class="glyphicon glyphicon-play"></span>

The “name” part of the syntax must be replaced accordingly.

Example:

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

OUTPUT:

NOTE: Place mouse pointer over icons to show the tooltip.

Example:

<div class="bs-example">
  <a href="#"><span class="fa fa-share" data-toggle="tooltip" data-original-title="Share"></span></a>
  <a href="#"><span class="fa fa-edit" data-toggle="tooltip" data-original-title="Edit"></span></a>
  <a href="#"><span class="fa fa-download" data-toggle="tooltip" data-original-title="Download"></span></a>
  <a href="#"><span class="fa fa-repeat" data-toggle="tooltip" data-original-title="Refresh"></span></a>
  <a href="#"><span class="fa fa-filter" data-toggle="tooltip" data-original-title="Filter"></span></a>
  <a href="#"><span class="fa fa-gear" data-toggle="tooltip" data-original-title="Setting"></span></a>

</div>

OUTPUT: