Journey With Bootstrap: Day 3 (Glyphicons)

Sanjay Singh
8y
36.8k
0
5

Article

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

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>