Bootstrap Glyphicons

What are Glyphicons?

First of all let you understand what are Glyphicons? Glyphicons are actually icon fonts which you be able to in any web based projects like web sites, CMS, blogs and applications. Bootstrap includes 200 glyphs in font format but Glyphicons Halflings are not free for use and require licensing, however the inventor of Glyphicons has made them free of cost available for Bootstrap projects.

It is recommended, as a thank you, we ask you to include an optional link back to GLYPHICONS whenever practical. Bootstrap Documentation

Where to find Glyphicons?

When we download latest version of Bootstrap 3.x and be aware of its directory structure from tutorial Environment Setup, glyphicons already found within the fonts folder. That contains following files there.

• 
  

  glyphicons-halflings-regular.eot

  
  


• 
  

  glyphicons-halflings-regular.svg

  
  


• 
  

  glyphicons-halflings-regular.ttf

  
  


• 
  

  glyphicons-halflings-regular.woff

  
  

Related CSS rules are present within bootstrap.css and bootstrap-min.css files within css. You can see the available glyphicons below.

HERE WILL BE DISPLAY ALL ICONS

Demo

Usage

There is simple way to use the icons, simple apply the following line of code just where you want to put in your code. Give a space between text and icon for proper padding.

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

Following example demonstrates this:

<p>
 <button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-attributes"></span>
 </button>
 <button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
 </button>
 <button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-order"></span>
 </button>
 <button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-order-alt"></span>
 </button>
</p>
<button type="button" class="btn btn-default btn-lg">
 <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
 <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
 <span class="glyphicon glyphicon-user"></span> User
</button>

Demo

Bootstrap Glyphicons