Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

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=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Glyphicon Examples</h2>
  12.   <p>Envelope icon: <span class=“glyphicon glyphicon-envelope”></span></p>
  13.   <p>Envelope icon as a link:
  14.     <a href=“#”><span class=“glyphicon glyphicon-envelope”></span></a>
  15.   </p>
  16.   <p>Search icon: <span class=“glyphicon glyphicon-search”></span></p>
  17.   <p>Search icon on a button:
  18.     <button type=“button” class=“btn btn-default”>
  19.       <span class=“glyphicon glyphicon-search”></span> Search
  20.     </button>
  21.   </p>
  22.   <p>Search icon on a styled button:
  23.     <button type=“button” class=“btn btn-info”>
  24.       <span class=“glyphicon glyphicon-search”></span> Search
  25.     </button>
  26.   </p>
  27.   <p>Print icon: <span class=“glyphicon glyphicon-print”></span></p>
  28.   <p>Print icon on a styled link button:
  29.     <a href=“#” class=“btn btn-success btn-lg”>
  30.       <span class=“glyphicon glyphicon-print”></span> Print
  31.     </a>
  32.   </p>
  33. </div>
  34.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  35.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  36. </body>
  37. </html>

Comments

comments