Glyphicons are very useful to make small things useful in our web page. There are plenty of glyphicons available by bootstrap check the official site and use according to your need.
Requirements:
- Download bootstrap files from here
- Place them into your html templates folder or where you want to use.
- Basic knowledge of HTML, CSS and JAVASCRIPT.
*****SOURCE CODE*****
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Glyphicons</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container" style="border: 1px groove; border-width: 7px; margin-top: 10px; padding: 10px;">
<h1>Glyphicons Examples</h1>
<!-- glphicons are mostly used in span tag. here is simple envelope glypficon there are plenty of these available-->
<p>Simple glyphicon: <span class="glyphicon glyphicon-envelope"></span></p>
<!-- the same above given glyphicon but here act as link -->
<p>Glyphicon as a link: <a href="https://www.google.co.in/?gfe_rd=cr&ei=7oQWVoftLbTv8we3rpaYBA" target="_blank"><span class=" glyphicon glyphicon-globe"></span></a></p>
<!-- glyphicon in buttons-->
<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> search</button>
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Glyphicons</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container" style="border: 1px groove; border-width: 7px; margin-top: 10px; padding: 10px;">
<h1>Glyphicons Examples</h1>
<!-- glphicons are mostly used in span tag. here is simple envelope glypficon there are plenty of these available-->
<p>Simple glyphicon: <span class="glyphicon glyphicon-envelope"></span></p>
<!-- the same above given glyphicon but here act as link -->
<p>Glyphicon as a link: <a href="https://www.google.co.in/?gfe_rd=cr&ei=7oQWVoftLbTv8we3rpaYBA" target="_blank"><span class=" glyphicon glyphicon-globe"></span></a></p>
<!-- glyphicon in buttons-->
<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> search</button>
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment