Glyphicons are icon fonts that can be used in web projects instead of images, it helps SEO optimization too. These Halflings are made free by the creator but requires licensing to use. Glyphicons are found within the fonts folder of the Bootstrap directory. These icons are used by simply adding respective codes anywhere inside the document body.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>nirajanghimirey's workshop</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Bootstrap glyphicon icons</h1>
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Home</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-headphone"></span> camera</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span> Volume</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-leaf"></span> Inbox</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-upload"></span> Upload</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-barcode"></span> Bar-code</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html> 
No comments:
Post a Comment