Bootstrap Glyphicons

Advertisements


This chapter will discuss about Glyphicons, its use and some examples. Bootstrap bundles 200 glyphs in font format. First let us understand what are Glyphicons.

What are Glyphicons?

Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

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?

Now that we have downloaded Bootstrap 3.x version and understand its directory structure from chapter Environment Setup, glyphicons can be found within the fonts folder. This contains following files:

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within css folder of dist folder. You can see the available glyphicons at this link : Glyphicons List

Usage

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text 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>
Glyphicon Demo


Advertisements
Advertisements