All for Joomla All for Webmasters

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>

 

PinIt
submit to reddit

Leave a Reply

Top