Quick Reach
- 1 Bootstrap Icons
- 2 Quick examples of Bootstrap glyphicons
- 3 How to use glyphicons in Bootstrap projects
- 4 List of Bootstrap glyphicon – icons and class names
- 5 Bootstrap Glyphicon icon example in the button
- 6 Button with align icon example in toolbar
- 7 Example of using Icons in Navigation bar
- 8 Example of using glyphicon in form controls
- 9 Media control bootstrap icon example
- 10 Related
Bootstrap Icons
Bootstrap Icons are the cool and descriptive way to present different elements with an icon. Using icons in the elements like buttons, navigations etc. not only add beauty in the presentation but also make it look more professional and descriptive. Many visitors are used to of their operating system icons like Tools icon, setting icon, search icon, repair with a lens etc that even without the text (that generally is not the case) they recognize the purpose of the button.
Twitter Bootstrap’s one of the feature is the library of around 200 icons that are basically glyphs taken from http://glyphicons.com/. The glyphicons icons are generally paid if you want to use it in your projects. However, for twitter Bootstrap, this set of icons is free that you can use anywhere on your website using the Bootstrap framework. The glyphs icons are in the font format from the Glyphicon Halflings set.
Quick examples of Bootstrap glyphicons
Align icons in the Toolbar example
Icons in nav bar example
glyphicon in form controls example
How to use glyphicons in Bootstrap projects
Using the glyphicons in your web pages for different elements is quite easy.
You have to use a base class name followed by the individual icon class for performance reasons.
For example:
the base class name is: glyphicon
individual icon class: glyphicon-search
This is how you will use it in a <span> element.
<span class=”glyphicon glyphicon-search”></span>
<span class=”glyphicon-class”>Search</span>
Experience this online
So you simply require to include glyphicon class and then icon class. Following is the list of icon classes (glyphicon) or class codes with icon symbol. Simply replace that search icon code to the one you want to use in your projects.
List of Bootstrap glyphicon – icons and class names
Following is the list of glyphicons with icon symbol and class names that you can use anywhere in your Bootstrap framework based project.
List of glyphicon icons for bootstrap
Following example shows how to use Twitter Bootstrap icon in the button element. For illustration purpose, we used four buttons with Star, Cloud, Search and film icons in the buttons.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<title>Icon example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Icon Example</h1>
<button type=“button”>
<span class=“glyphicon glyphicon-star”></span> Star
</button>
<button type=“button”>
<span class=“glyphicon glyphicon glyphicon-cloud”></span> Cloud Hosting
</button>
<button type=“button”>Search
<span class=“glyphicon glyphicon-search”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon glyphicon-film”></span> Film
</button>
</div>
</body>
</html>
|
Button with align icon example in toolbar
Following example uses left, right, and center alignment icons in the buttons.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<title>Icon example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Icon Example</h1>
<button type=“button”>
<span class=“glyphicon glyphicon-align-left”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-align-center”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-align-right”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-align-justify”></span>
</button>
</div>
</body>
</html>
|
Following example uses Bootstrap icons in nav bar in a button and a link. The link is using the glyphicon glyphicon-envelope class to show email icon and button is using the glyphicon glyphicon-search class to show search symbol.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!DOCTYPE html>
<html>
<head>
<title>Icon example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Icon Example</h1>
<nav role=“navigation”>
<div class=“container-fluid”>
<!– Navigation bar –>
<div class=“collapse navbar-collapse” id=“bs-example-navbar-collapse-1”>
<ul class=“nav navbar-nav”>
<li class=“active”><a href=“#”>Home</a></li>
<li class=“dropdown”>
<a href=“#” data-toggle=“dropdown”>Products <b class=“caret”></b></a>
<ul class=“dropdown-menu”>
<li><a href=“#”>Product 1</a></li>
<li><a href=“#”>Product 2</a></li>
<li><a href=“#”>Product 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Product 4</a></li>
<li class=“divider”></li>
<li><a href=“#”>Product 5</a></li>
</ul>
</li>
<li><a href=“#”>Services</a></li>
<li><a href=“#”>About</a></li>
<li><a href=“#”></a>
</li>
</ul>
<form class=“navbar-form navbar-left” role=“search”>
<div class=“form-group”>
<input type=“text” placeholder=“Search site”>
</div>
<button type=“submit”>
<span class=“glyphicon glyphicon-search”></span>
</button>
</form>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
<!– Navigation bar ends here –>
</div>
</div>
</body>
</html>
|
Example of using glyphicon in form controls
You can include icons in the form elements like textboxes quite easily. This really adds awesome user experience. The following example shows how to use Twitter Bootstrap icon in form elements like textboxes.
The first textbox uses a Tick symbol (glyphicon glyphicon-ok class), to show success icon. Second text box shows the warning icon. The third textbox shows an error icon while the last one shows email icon within the textbox.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html>
<head>
<title>Icon example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Icon Example</h1>
<div>
<label class=“control-label” for=“inputSuccess2”>Text box icon example with success</label>
<input type=“text” id=“inputSuccess2”>
</div>
<div>
<label class=“control-label” for=“inputWarning2”>Text box icon example with warning icon</label>
<input type=“text” id=“inputWarning2”>
<span class=“glyphicon glyphicon-warning-sign form-control-feedback”></span>
</div>
<div>
<label class=“control-label” for=“inputError2”>Input with error icon</label>
<input type=“text” id=“inputError2”>
<span class=“glyphicon glyphicon-remove form-control-feedback”></span>
</div>
<div>
<label class=“control-label” for=“email1”>Enter Email</label>
<input type=“text” id=“email1”>
<span class=“glyphicon glyphicon-envelope form-control-feedback”></span>
</div>
</div>
</div>
</body>
</html>
|
Media control bootstrap icon example
Following example shows how to use media controls: backward, forward, fast-forward, fast-backward, play, pause and stop etc. buttons with glyphicons.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<title>Icon example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Icon Example</h1>
<button type=“button”>
<span class=“glyphicon glyphicon-step-backward”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-fast-backward”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-backward”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-play”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-pause”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-stop”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-forward”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-fast-forward”></span>
</button>
<button type=“button”>
<span class=“glyphicon glyphicon-step-forward”></span>
</button>
</div>
</body>
</html>
|
Further Reading: Bootstrap Tutorial | Bootstrap and Table | Bootstrap CSS | Forms in Bootstrap
Leave A Comment?