Bootstrap Glyphicons v3.3.7 - Bootstrap Cheat Sheets PDF
Bootstrap Glyphicons v3.3.7 - Bootstrap Cheat Sheets PDF
Bootstrap Glyphicons v3.3.7 - Bootstrap Cheat Sheets PDF
v.3.3.7
BOOTSTRAP GLYPHICONS
* +
.glyphicon-glyphicon-asterisk .glyphicon-glyphicon-plus
Copy Copy
€ €
.glyphicon-glyphicon-eur .glyphicon-glyphicon-euro
Copy Copy
− ☁
.glyphicon-glyphicon-minus .glyphicon-glyphicon-cloud
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 1/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
✉ ✏
.glyphicon-glyphicon-envelope .glyphicon-glyphicon-pencil
Copy Copy
.glyphicon-glyphicon-glass .glyphicon-glyphicon-music
Copy Copy
.glyphicon-glyphicon-search .glyphicon-glyphicon-heart
Copy Copy
.glyphicon-glyphicon-star .glyphicon-glyphicon-star-empty
https://glyphicons.bootstrapcheatsheets.com 2/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
Copy Copy
.glyphicon-glyphicon-user .glyphicon-glyphicon-film
Copy Copy
.glyphicon-glyphicon-th-large .glyphicon-glyphicon-th
Copy Copy
.glyphicon-glyphicon-th-list .glyphicon-glyphicon-ok
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 3/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-remove .glyphicon-glyphicon-zoom-in
Copy Copy
.glyphicon-glyphicon-zoom-out .glyphicon-glyphicon-off
Copy Copy
.glyphicon-glyphicon-signal .glyphicon-glyphicon-cog
Copy Copy
.glyphicon-glyphicon-trash .glyphicon-glyphicon-home
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 4/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-file .glyphicon-glyphicon-time
Copy Copy
.glyphicon-glyphicon-road .glyphicon-glyphicon-download-alt
Copy Copy
.glyphicon-glyphicon-download .glyphicon-glyphicon-upload
Copy Copy
.glyphicon-glyphicon-inbox .glyphicon-glyphicon-play-circle
https://glyphicons.bootstrapcheatsheets.com 5/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
Copy Copy
.glyphicon-glyphicon-repeat .glyphicon-glyphicon-refresh
Copy Copy
.glyphicon-glyphicon-list-alt .glyphicon-glyphicon-lock
Copy Copy
.glyphicon-glyphicon-flag .glyphicon-glyphicon-headphones
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 6/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-volume-off .glyphicon-glyphicon-volume-down
Copy Copy
.glyphicon-glyphicon-volume-up .glyphicon-glyphicon-qrcode
Copy Copy
.glyphicon-glyphicon-barcode .glyphicon-glyphicon-tag
Copy Copy
.glyphicon-glyphicon-tags .glyphicon-glyphicon-book
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 7/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-bookmark .glyphicon-glyphicon-print
Copy Copy
.glyphicon-glyphicon-camera .glyphicon-glyphicon-font
Copy Copy
.glyphicon-glyphicon-bold .glyphicon-glyphicon-italic
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 8/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-text-height .glyphicon-glyphicon-text-width
Copy Copy
.glyphicon-glyphicon-align-left .glyphicon-glyphicon-align-center
Copy Copy
.glyphicon-glyphicon-align-right .glyphicon-glyphicon-align-justify
Copy Copy
.glyphicon-glyphicon-list .glyphicon-glyphicon-indent-left
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
9/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-indent-right .glyphicon-glyphicon-facetime-video
Copy Copy
.glyphicon-glyphicon-picture .glyphicon-glyphicon-map-marker
Copy Copy
.glyphicon-glyphicon-adjust .glyphicon-glyphicon-tint
Copy Copy
.glyphicon-glyphicon-edit .glyphicon-glyphicon-share
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
10/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-check .glyphicon-glyphicon-move
Copy Copy
.glyphicon-glyphicon-step-backward .glyphicon-glyphicon-fast-backward
Copy Copy
.glyphicon-glyphicon-backward .glyphicon-glyphicon-play
Copy Copy
.glyphicon-glyphicon-pause .glyphicon-glyphicon-stop
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
11/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-forward .glyphicon-glyphicon-fast-forward
Copy Copy
.glyphicon-glyphicon-step-forward .glyphicon-glyphicon-eject
Copy Copy
.glyphicon-glyphicon-chevron-left .glyphicon-glyphicon-chevron-right
Copy Copy
.glyphicon-glyphicon-plus-sign .glyphicon-glyphicon-minus-sign
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 12/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-remove-sign .glyphicon-glyphicon-ok-sign
Copy Copy
.glyphicon-glyphicon-question-sign .glyphicon-glyphicon-info-sign
Copy Copy
.glyphicon-glyphicon-screenshot .glyphicon-glyphicon-remove-circle
Copy Copy
.glyphicon-glyphicon-ok-circle .glyphicon-glyphicon-ban-circle
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
13/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-arrow-left .glyphicon-glyphicon-arrow-right
Copy Copy
.glyphicon-glyphicon-arrow-up .glyphicon-glyphicon-arrow-down
Copy Copy
.glyphicon-glyphicon-share-alt .glyphicon-glyphicon-resize-full
Copy Copy
.glyphicon-glyphicon-resize-small .glyphicon-glyphicon-exclamation-
sign
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
14/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-gift .glyphicon-glyphicon-leaf
Copy Copy
.glyphicon-glyphicon-fire .glyphicon-glyphicon-eye-open
Copy Copy
.glyphicon-glyphicon-eye-close .glyphicon-glyphicon-warning-sign
Copy Copy
.glyphicon-glyphicon-plane .glyphicon-glyphicon-calendar
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
15/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-random .glyphicon-glyphicon-comment
Copy Copy
.glyphicon-glyphicon-magnet .glyphicon-glyphicon-chevron-up
Copy Copy
.glyphicon-glyphicon-chevron-down .glyphicon-glyphicon-retweet
Copy Copy
.glyphicon-glyphicon-shopping-cart .glyphicon-glyphicon-folder-close
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
16/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-folder-open .glyphicon-glyphicon-resize-
vertical
Copy Copy
.glyphicon-glyphicon-resize- .glyphicon-glyphicon-hdd
horizontal
Copy Copy
.glyphicon-glyphicon-bullhorn .glyphicon-glyphicon-bell
Copy Copy
.glyphicon-glyphicon-certificate .glyphicon-glyphicon-thumbs-up
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 17/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-thumbs-down .glyphicon-glyphicon-hand-right
Copy Copy
.glyphicon-glyphicon-hand-left .glyphicon-glyphicon-hand-up
Copy Copy
.glyphicon-glyphicon-hand-down .glyphicon-glyphicon-circle-arrow-
right
Copy Copy
.glyphicon-glyphicon-circle-arrow- .glyphicon-glyphicon-circle-arrow-
left up
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
18/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-circle-arrow- .glyphicon-glyphicon-globe
down
Copy Copy
.glyphicon-glyphicon-wrench .glyphicon-glyphicon-tasks
Copy Copy
.glyphicon-glyphicon-filter .glyphicon-glyphicon-briefcase
Copy Copy
.glyphicon-glyphicon-fullscreen .glyphicon-glyphicon-dashboard
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
19/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-paperclip .glyphicon-glyphicon-heart-empty
Copy Copy
.glyphicon-glyphicon-link .glyphicon-glyphicon-phone
Copy Copy
.glyphicon-glyphicon-pushpin .glyphicon-glyphicon-usd
Copy Copy
.glyphicon-glyphicon-gbp .glyphicon-glyphicon-sort
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
20/39
9/18/2019
Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-sort-by- .glyphicon-glyphicon-sort-by-
alphabet alphabet-alt
Copy Copy
.glyphicon-glyphicon-sort-by-order .glyphicon-glyphicon-sort-by-order-
alt
Copy Copy
.glyphicon-glyphicon-sort-by- .glyphicon-glyphicon-sort-by-
attributes attributes-alt
Copy Copy
.glyphicon-glyphicon-unchecked .glyphicon-glyphicon-expand
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
21/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-collapse-down .glyphicon-glyphicon-collapse-up
Copy Copy
.glyphicon-glyphicon-log-in .glyphicon-glyphicon-flash
Copy Copy
.glyphicon-glyphicon-log-out .glyphicon-glyphicon-new-window
Copy Copy
.glyphicon-glyphicon-record .glyphicon-glyphicon-save
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 22/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-open .glyphicon-glyphicon-saved
Copy Copy
.glyphicon-glyphicon-import .glyphicon-glyphicon-export
Copy Copy
.glyphicon-glyphicon-send .glyphicon-glyphicon-floppy-disk
Copy Copy
.glyphicon-glyphicon-floppy-saved .glyphicon-glyphicon-floppy-remove
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
23/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-floppy-save .glyphicon-glyphicon-floppy-open
Copy Copy
.glyphicon-glyphicon-credit-card .glyphicon-glyphicon-transfer
Copy Copy
.glyphicon-glyphicon-cutlery .glyphicon-glyphicon-header
Copy Copy
.glyphicon-glyphicon-compressed .glyphicon-glyphicon-earphone
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
24/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-phone-alt .glyphicon-glyphicon-tower
Copy Copy
.glyphicon-glyphicon-stats .glyphicon-glyphicon-sd-video
Copy Copy
.glyphicon-glyphicon-hd-video .glyphicon-glyphicon-subtitles
Copy Copy
.glyphicon-glyphicon-sound-stereo .glyphicon-glyphicon-sound-dolby
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
25/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-sound-5-1 .glyphicon-glyphicon-sound-6-1
Copy Copy
.glyphicon-glyphicon-sound-7-1 .glyphicon-glyphicon-copyright-mark
Copy Copy
.glyphicon-glyphicon-registration- .glyphicon-glyphicon-cloud-download
mark
Copy Copy
.glyphicon-glyphicon-cloud-upload .glyphicon-glyphicon-tree-conifer
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
26/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-tree-deciduous .glyphicon-glyphicon-cd
Copy Copy
.glyphicon-glyphicon-save-file .glyphicon-glyphicon-open-file
Copy Copy
.glyphicon-glyphicon-level-up .glyphicon-glyphicon-copy
Copy Copy
.glyphicon-glyphicon-paste .glyphicon-glyphicon-alert
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 27/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-equalizer .glyphicon-glyphicon-king
Copy Copy
.glyphicon-glyphicon-queen .glyphicon-glyphicon-pawn
Copy Copy
.glyphicon-glyphicon-bishop .glyphicon-glyphicon-knight
Copy Copy
⛺
.glyphicon-glyphicon-baby-formula .glyphicon-glyphicon-tent
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
28/39
9/18/2019
Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-blackboard .glyphicon-glyphicon-bed
Copy Copy
.glyphicon-glyphicon-apple .glyphicon-glyphicon-erase
Copy Copy
⌛
.glyphicon-glyphicon-hourglass .glyphicon-glyphicon-lamp
Copy Copy
.glyphicon-glyphicon-duplicate .glyphicon-glyphicon-piggy-bank
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
29/39
9/18/2019
Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-scissors .glyphicon-glyphicon-bitcoin
Copy Copy
¥ ₽
.glyphicon-glyphicon-yen .glyphicon-glyphicon-ruble
Copy Copy
.glyphicon-glyphicon-scale .glyphicon-glyphicon-ice-lolly
Copy Copy
.glyphicon-glyphicon-ice-lolly- .glyphicon-glyphicon-education
tasted
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
30/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-option- .glyphicon-glyphicon-option-
horizontal vertical
Copy Copy
.glyphicon-glyphicon-menu-hamburger .glyphicon-glyphicon-modal-window
Copy Copy
.glyphicon-glyphicon-oil .glyphicon-glyphicon-grain
Copy Copy
.glyphicon-glyphicon-sunglasses .glyphicon-glyphicon-text-size
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
31/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-text-color .glyphicon-glyphicon-text-
background
Copy Copy
.glyphicon-glyphicon-object-align- .glyphicon-glyphicon-object-align-
top bottom
Copy Copy
.glyphicon-glyphicon-object-align- .glyphicon-glyphicon-object-align-
horizontal left
Copy Copy
.glyphicon-glyphicon-object-align- .glyphicon-glyphicon-object-align-
vertical right
Copy Copy
https://glyphicons.bootstrapcheatsheets.com 32/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-triangle-right .glyphicon-glyphicon-triangle-left
Copy Copy
.glyphicon-glyphicon-triangle- .glyphicon-glyphicon-triangle-top
bottom
Copy Copy
.glyphicon-glyphicon-console .glyphicon-glyphicon-superscript
Copy Copy
.glyphicon-glyphicon-subscript .glyphicon-glyphicon-menu-left
Copy Copy
https://glyphicons.bootstrapcheatsheets.com
33/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
.glyphicon-glyphicon-menu-right .glyphicon-glyphicon-menu-down
Copy Copy
.glyphicon-glyphicon-menu-up
Copy
Cheat sheet?
Yeah! To use this cheat sheet, simply find the glyphicon you want to use and click the
copy button. This will add the complete HTML code for that glyphicon (span tag and
all) to your clipboard, ready to paste into your web development tool of choice.
https://glyphicons.bootstrapcheatsheets.com 34/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
If you're creating a site based on Bootstrap 3.3.7, you already have access to all 260
glyphs in the Glyphicons 1.9 set.
Don't know how to set up Bootstrap? Go check out the o ical getting started guide
(https://getbootstrap.com/getting-started/),, or simply just include these two lines in
(https://getbootstrap.com/getting-started/)
your <head> tag:
CSS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Javacript:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Counterpoint
Icon fonts aren't the only way to implement icons on the web. If you're looking for
a explanation of using icon fonts vs. SVG files (another possible method), I'd
suggest reading this excellent post by Ian Feather: Ten reasons we switched from
an icon font to SVG.
SVG. (http://ianfeather.co.uk/ten-reasons-we-switched-from-an-
icon-font-to-svg/)
So, how do I add an icon to my webpage? Well, Glyphicons can be used on the web in
one of three ways.
1. HTML Tag
You can use a simple <span> tag to place an glyphicon in your page, like this:
<span class="
class="glyphicon glyphicon-home
glyphicon-home">
"></span>
</span> =
3. CSS Rule
Examples
You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar,
navigation or prepended form inputs. Here are a few examples of glyphicons in action:
Buttons
https://glyphicons.bootstrapcheatsheets.com 36/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
EXAMPLE
Star
<button type="button"
type="button" class=
class="btn
"btn btn-default btn-lg">
btn-lg">
<span class="glyphicon
class="glyphicon glyphicon-star
glyphicon-star"
"></span> Star
</button>
Toolbars
EXAMPLE
<div class="btn-toolbar"
class="btn-toolbar" role=
role="toolbar"
"toolbar">
>
<div class="btn-group">
class="btn-group">
<button type="button"
type="button" class=
class="btn
"btn btn-default">
btn-default">
<span class="glyphicon
class="glyphicon glyphicon-align-left
glyphicon-align-left"
"></span>
</button>
<button type="button"
type="button" class=
class="btn
"btn btn-default">
btn-default">
<span class="glyphicon
class="glyphicon glyphicon-align-center
glyphicon-align-center""></span>
</button>
<button type="button"
type="button" class=
class="btn
"btn btn-default">
btn-default">
<span class="glyphicon
class="glyphicon glyphicon-align-right
glyphicon-align-right"">
</span>
</button>
<button type="button"
type="button" class=
class="btn
"btn btn-default">
btn-default">
<span class="glyphicon
class="glyphicon glyphicon-align-justify
glyphicon-align-justify" ">
</span>
</button>
</div>
</div>
Navigation
EXAMPLE
https://glyphicons.bootstrapcheatsheets.com 37/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
<ul class="nav
class="nav nav-pills">
nav-pills">
<li>
<a href="index.html"
href="index.html">>
<span class="glyphicon
class="glyphicon glyphicon-home
glyphicon-home"
"></span> Home
</a>
</li>
<li>
<a href="shop.html"
href="shop.html">
>
<span class="glyphicon
class="glyphicon glyphicon-shopping-cart
glyphicon-shopping-cart"
"></span> Shop
</a>
</li>
<li>
<a href="about.html"
href="about.html">>
<span class="glyphicon
class="glyphicon glyphicon-info-sign
glyphicon-info-sign"
"></span> About
</a>
</li>
</ul>
Form Inputs
EXAMPLE
✉ Email address
Password
<div class="input-group
class="input-group input-group-lg">
input-group-lg">
<span class="input-group-addon"
class="input-group-addon">
>
<span class="
class="glyphicon glyphicon-envelope
glyphicon-envelope""></span>
</span>
<input class="form-control"
class="form-control" type=
type="text"
"text" placeholder=
placeholder="Email
"Email address">
address">
</div>
<div class="input-group
class="input-group input-group-lg">
input-group-lg">
<span class="input-group-addon"
class="input-group-addon">
>
<span class="
class="glyphicon glyphicon-lock
glyphicon-lock"
"></span>
</span>
<input class="form-control"
class="form-control" type=
type="password"
"password" placeholder=
placeholder="Password"
"Password">
>
</div>
Additional Reading
https://glyphicons.bootstrapcheatsheets.com 38/39
9/18/2019 Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets
Want more info on the Glyphicons in Bootstrap 3? Check out the o icial Bootstrap
documentation (https://getbootstrap.com/components/#glyphicons)
(https://getbootstrap.com/components/#glyphicons)..
About me
(https://twitter.com/jamescro )
If you found this page useful, consider buying a Bootstrap Cheat Sheet poster
(http://bootstrapcheatsheets.com/shop) for your wall!
https://glyphicons.bootstrapcheatsheets.com 39/39