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:
- Journey With Bootstrap: Day 1
- 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.
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- Glyphicons
- </title>
- <link rel="stylesheet" href="js/css/bootstrap.min.css">
- <script src="js/bootstrap.min.js"></script>
- <meta name="viewport" content="width= device-width, initial-scale=1">
- <style>
- body
- {
- text-align:center;
- color:#006;
- background-color:#CCC;
- }
- </style>
- </head>
- <body>
- User Name <span class="glyphicon glyphicon-user"></span><br>
- Contact No <span class="glyphicon glyphicon-phone"></span><br>
- Address <span class="glyphicon glyphicon-home"></span><br>
- Download <a href="#">
- <span class="glyphicon glyphicon-download"></span></a><br>
- <button type="button" class="btn btn-default btn-md">
- <span class="glyphicon glyphicon-cloud-upload">Upload</span>
- </button>
- </body>
- </html>
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.
- Default
- Info
- Primary
- Danger
- success
- warning
Sysntax:
<button type="button" class="btn btn-default btn-size">
<span class="glyphicon glyphicon-name"></span></button>
For example:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Buttons</title>
- <link rel="stylesheet" href="js/css/bootstrap.min.css">
- <script src="js/bootstrap.min.js"></script>
- <meta name="viewport" content="width= device-width, initial-scale=1">
- </head>
- <body>
- <div class="container">
- <h3>Different Types of button</h3>
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-default">Default</button>
- <button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-primary">Primary</button>
- </div>
- </body>
- </html>
Output
![button]()
The following is a brief example:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Glyphicon form</title>
- <link rel="stylesheet" href="css/bootstrap.min.css" />
- <script src="js/bootstrap.min.js">
- </script>
- <meta name="viewport" content="width= device-width, initial-scale=1">
- <style>
- body
- {
- background-color:#CCC;
- }
- form
- {
- Width:400px;
- height:500px;
- border-color:#000;
- margin-left:200px;
- text-align:center;
- color:#003;
- }
- </style>
- <meta name="viewport" content="width= device-width, initial-scale=1" />
- </head>
- <body>
- <form>
- <caption>Form With Bootstrap</caption>
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
- <input type="text" class="form-control" placeholder="Enter Your name" />
- </div>
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
- <input type="password" class="form-control" placeholder="Enter Password" />
- </div>
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
- <input type="password" class="form-control" placeholder="Re-Enter Password" />
- </div>
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
- <input type="date" class="form-control"/>
- </div>
- <div class="input-group">
- <span class="input-group-addon"><span class="glyphicon glyphicon-upload"></span></span>
- <input type="file" class="form-control" />
- </div>
- <div class="input-group">
- <input type="text" class="form-control" placeholder="Contect Number" maxlength="10" min="10" />
- <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
- </div>
- <div class="input-group">
- <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-fast-backward"></span></a></span>
- <input type="text" class="form-control" />
- <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-fast-forward"></span></a></span>
- </div>
- <br />
- <button type="Submit" class="btn btn-success">
- <span class="glyphicon glyphicon-cloud-upload"> Upload</span></button>
- <button type="reset" class="btn btn-danger">
- <span class="glyphicon glyphicon-edit"> Edit</span></button>
- </
- </form>
- </body>
- </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!