Bootstrap Icons

Bootstrap Icons – Bootstrap font icon includes more than 250 Glyphicons. Bootstrap CS File and Bootstrap JS File is required for use of bootstrap icons or any other bootsrap code.

HTML5 and CSS3 is use for responsive.

Examples:

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

<!–Bootstrap css file–>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css”>
<style type=“text/css”>
.glyphicon-2x{ font-size:28px;}
</style>
</head>

<body>

<div class=“container”>
<h1> Bootstrap icon – Use below code for bootstrap icons </h1>
CodeOutput
< span class="glyphicon glyphicon-user glyphicon-2x"> < /span>icon-user
< span class="glyphicon glyphicon-lock glyphicon-2x"> < /span>icon-lock
< span class="glyphicon glyphicon-pencil glyphicon-2x"> < /span>icon-lock
< span class="glyphicon glyphicon-globe glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-phone glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-envelope glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-unchecked glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-flash glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-open glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-saved glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-save glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-import glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-earphone glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-phone-alt glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-blackboard glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-bed glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-erase glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-education glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-option-horizontal glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-option-vertical glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-menu-hamburger glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-triangle-right glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-triangle-left glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-triangle-bottom glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-triangle-top glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-menu-left glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-menu-right glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-menu-down glyphicon-2x">< /span>icon-lock
< span class="glyphicon glyphicon-menu-up glyphicon-2x">icon-lock
</div>

<!-- End Container -->

<!--Bootstrap js file-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>



Leave a Reply

avatar
  Subscribe  
Notify of