Bootstrap Icons

by Abhishek 24-Jul-16

0 707


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>
Code
Output

< span class="glyphicon glyphicon-user glyphicon-2x"> < /span>

Bootstrap Icons

<span class="glyphicon glyphicon-lock glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-pencil glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-globe glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-phone glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-envelope glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-unchecked glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-flash glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-open glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-saved glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-save glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-import glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-earphone glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-phone-alt glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-blackboard glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-bed glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-erase glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-education glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-option-horizontal glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-option-vertical glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-menu-hamburger glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-triangle-right glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-triangle-left glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-triangle-bottom glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-triangle-top glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-menu-left glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-menu-right glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-menu-down glyphicon-2x"> </span>

Bootstrap Icons

<span class="glyphicon glyphicon-menu-up glyphicon-2x"> </span>

Bootstrap Icons

</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>


Share:


Comments

    No Comments Yet.

Leave a Reply