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:

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.

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

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

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!

11 Comments

Join the conversation! Your thoughts help the community grow.

Subash10y ago
Nice share
amit tiwari11y ago
insurancebazar.in/Index.aspx
amit tiwari11y ago
Nice one
Sahil Sharma12y ago
nicely explained Sanjay. Keep up the good work. Just a suggestion about your code sample that you use style tag for formatting the body section. It is not considered a good approach, instead create a css for your html formatting and call it on the page. Otherwise a great article. Cheers :)
- Sanjay Singh12y ago
  thank you so much Sahil Sharma sir for suggestion.
Madhuram Srivastava12y ago
nice topic on glyphicons
- Sanjay Singh12y ago
  thanks Madhuram Srivastava :)
Manish Kumar Choudhary12y ago
nice one...
- Sanjay Singh12y ago
  thanks sir !!!
Praveen Kumar12y ago
Sanjay, It's too impressive!
- Sanjay Singh12y ago
  thank you Praveen Kumar sir..