Post
Ask Question

Journey With Bootstrap: Day 3 (Glyphicons)

Hello Geeks,

First of all, I would like to thank you for appreciating and motivating me to write articles on this technology.

Before reading this article, I highly recommend reading the previous parts:

  1. Journey With Bootstrap: Day 1
  2. Journey With Bootstrap: Day 2 ( Grid System)

Today is the third day of our "journey with Bootstrap". Today we learn how to use Glyphicons in the web pages or in applications. So let's start.

What is Glyphicons

Glyphicons are icons we use to make our web page more attractive. For example, when we open a signup page then we see a user icon before a text box, this icon is glyphicon.

glyphicons

Syntax: The syntax to add Glyphicons to a web page is:

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

Some glyphicons are:

bootstrap

The following is an example of using it.

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>  
  5.          Glyphicons  
  6.       </title>  
  7.       <link rel="stylesheet" href="js/css/bootstrap.min.css">  
  8.       <script src="js/bootstrap.min.js"></script>  
  9.       <meta name="viewport" content="width= device-width, initial-scale=1">  
  10.       <style>  
  11.          body  
  12.          {  
  13.             text-align:center;  
  14.             color:#006;  
  15.             background-color:#CCC;  
  16.          }  
  17.       </style>  
  18.    </head>  
  19.    <body>  
  20.       User Name <span class="glyphicon glyphicon-user"></span><br>  
  21.       Contact No <span class="glyphicon glyphicon-phone"></span><br>  
  22.       Address <span class="glyphicon glyphicon-home"></span><br>  
  23.       Download <a href="#">  
  24.       <span class="glyphicon glyphicon-download"></span></a><br>  
  25.       <button type="button" class="btn btn-default btn-md">  
  26.          <span class="glyphicon glyphicon-cloud-upload">Upload</span>  
  27.       </button>  
  28.    </body>  
  29. </html>  
Output

Output

Glyphicons for Buttons: We can also use a Glyphicon inside a button. In Bootstrap we have six types of buttons that we can use directly.
  1. Default
  2. Info
  3. Primary
  4. Danger
  5. success
  6. warning

Sysntax:

<button type="button" class="btn btn-default btn-size">
<span class="glyphicon glyphicon-name"></span></button>

For example:

  1. <!DOCTYPE html>  
  2. <html> 
  3.    <head>
  4.       <title>Buttons</title>  
  5.       <link rel="stylesheet" href="js/css/bootstrap.min.css">  
  6.       <script src="js/bootstrap.min.js"></script>  
  7.       <meta name="viewport" content="width= device-width, initial-scale=1">  
  8.    </head>  
  9.    <body>  
  10.       <div class="container">  
  11.          <h3>Different Types of button</h3>  
  12.          <button type="button" class="btn btn-danger">Danger</button>  
  13.          <button type="button" class="btn btn-default">Default</button>  
  14.          <button type="button" class="btn btn-info">Info</button>  
  15.          <button type="button" class="btn btn-warning">Warning</button>  
  16.          <button type="button" class="btn btn-success">Success</button>  
  17.          <button type="button" class="btn btn-primary">Primary</button>  
  18.       </div>  
  19.    </body>  
  20. </html>  
Output

button
The following is a brief example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>Glyphicon form</title>  
  5.       <link rel="stylesheet" href="css/bootstrap.min.css" />  
  6.       <script src="js/bootstrap.min.js">  
  7.       </script>  
  8.       <meta name="viewport" content="width= device-width, initial-scale=1">  
  9.       <style>  
  10.          body  
  11.          {  
  12.             background-color:#CCC;  
  13.          }  
  14.          form  
  15.          {  
  16.             Width:400px;  
  17.             height:500px;  
  18.             border-color:#000;  
  19.             margin-left:200px;  
  20.             text-align:center;  
  21.             color:#003;  
  22.          }  
  23.       </style>  
  24.       <meta name="viewport" content="width= device-width, initial-scale=1" />  
  25.    </head>  
  26.    <body>  
  27.       <form>  
  28.          <caption>Form With Bootstrap</caption>  
  29.          <div class="input-group">  
  30.             <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>  
  31.             <input type="text" class="form-control" placeholder="Enter Your name" />  
  32.          </div>  
  33.          <div class="input-group">  
  34.             <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>  
  35.             <input type="password" class="form-control" placeholder="Enter Password" />  
  36.          </div>  
  37.          <div class="input-group">  
  38.             <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>  
  39.             <input type="password" class="form-control" placeholder="Re-Enter Password" />  
  40.          </div>  
  41.          <div class="input-group">  
  42.             <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>  
  43.             <input type="date" class="form-control"/>  
  44.          </div>  
  45.          <div class="input-group">  
  46.             <span class="input-group-addon"><span class="glyphicon glyphicon-upload"></span></span>  
  47.             <input type="file" class="form-control" />  
  48.          </div>  
  49.          <div class="input-group">  
  50.             <input type="text" class="form-control" placeholder="Contect Number" maxlength="10" min="10" />  
  51.             <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>  
  52.          </div>  
  53.          <div class="input-group">  
  54.             <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-fast-backward"></span></a></span>  
  55.             <input type="text" class="form-control" />  
  56.             <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-fast-forward"></span></a></span>  
  57.          </div>  
  58.       <br />  
  59.       <button type="Submit" class="btn btn-success">  
  60.          <span class="glyphicon glyphicon-cloud-upload"> Upload</span></button>  
  61.             <button type="reset" class="btn btn-danger">  
  62.             <span class="glyphicon glyphicon-edit"> Edit</span></button>  
  63.          </  
  64.       </form>  
  65.    </body>  
  66. </html>  
Output

form

Now here we end our third day journey, for the next day I will have a dropdown button using Bootstrap's Glyphicons.

Enjoy coding!


Similar Articles