Description
Bootstrap Glyphicons includes over 260 glyphs in font format from the Glyphicon Halflings set.
Syntax
glyphicons can be used in many ways and can be also used with buttons, text, toolbars, navigations, forms, alert messages and many more.
[html]<span class="glyphicon glyphicon-name"></span>[/html]
Example
Here is the the simple calendar icon:
Here is the the simple phone icon:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SPLessons - Bootstrap Glyphicon Example</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2> <a href="http://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Glyphicons </a> </h2>
<p>Here is the the simple calendar icon: <span class="glyphicon glyphicon-calendar"></span> </p>
<p>Here is the the simple phone icon: <span class="glyphicon glyphicon-phone-alt"></span> </p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
[/html]
Description
Glyphicons size mostly depends on the font size of the parent. Here is the example how the icons size varies based on buttons.
Example
[html]
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
[/html]
For performance reasons
All icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding. Examples
| Glyphicon | Code |
|---|---|
| [html]<span class="glyphicon glyphicon-asterisk"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-plus"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-minus"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-euro"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-cloud"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-envelope"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-search"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-heart"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-user"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-film"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-ok"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-menu-hamburger"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-off"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-signal"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-cog"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-trash"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-print"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-facetime-video"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-picture"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-play"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-thumbs-up"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-fullscreen"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-save"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-earphone"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-triangle-right"></span>[/html] | |
| [html]<span class="glyphicon glyphicon-menu-left"></span>[/html] |
Key Points
- Glyphicons are symbols/icons used in a website.
- The class .glyphicon glyphicon-name is used by replacing name of glyphicon in the given class.