BOOTSTRAP 3 GLYPHICONS

.glyphicon
adjust

.glyphicon
aligncenter

Copy

Copy

.glyphicon
alignjustify

.glyphicon
alignleft

Copy

Copy

.glyphicon
alignright

.glyphicon
arrowdown

Copy

Copy

.glyphicon
arrowleft

.glyphicon
arrowright

Copy

Copy

.glyphicon
arrowup

.glyphicon
asterisk

Copy

Copy

.glyphicon
backward

.glyphicon
bancircle

Copy

Copy

.glyphicon
barcode

.glyphicon
bell

Copy

Copy

.glyphicon
bold

.glyphicon
book

Copy

Copy

.glyphicon
bookmark

.glyphicon
briefcase

Copy

Copy

.glyphicon
bullhorn

.glyphicon
calendar

Copy

Copy

.glyphicon
camera

.glyphicon
certificate

Copy

Copy

.glyphicon
check

.glyphicon
chevrondown

Copy

Copy

.glyphicon
chevronleft

.glyphicon
chevronright

Copy

Copy

.glyphicon
chevronup

.glyphicon
circlearrowdown

Copy

Copy

.glyphicon
circlearrowleft

.glyphicon
circlearrowright

Copy

Copy

.glyphicon
circlearrowup

.glyphicon
cloud

Copy

Copy

.glyphicon
clouddownload

.glyphicon
cloudupload

Copy

Copy

.glyphicon
cog

.glyphicon
collapsedown

Copy

Copy

.glyphicon
collapseup

.glyphicon
comment

Copy

Copy

.glyphicon
compressed

.glyphicon
copyrightmark

Copy

Copy

.glyphicon
creditcard

.glyphicon
cutlery

Copy

Copy

.glyphicon
dashboard

.glyphicon
download

Copy

Copy

.glyphicon
downloadalt

.glyphicon
earphone

Copy

Copy

.glyphicon
edit

.glyphicon
eject

Copy

Copy

.glyphicon
envelope

.glyphicon
euro

Copy

Copy

.glyphicon
exclamationsign

.glyphicon
expand

Copy

Copy

.glyphicon
export

.glyphicon
eyeclose

Copy

Copy

.glyphicon
eyeopen

.glyphicon
facetimevideo

Copy

Copy

.glyphicon
fastbackward

.glyphicon
fastforward

Copy

Copy

.glyphicon
file

.glyphicon
film

Copy

Copy

.glyphicon
filter

.glyphicon
fire

Copy

Copy

.glyphicon
flag

.glyphicon
flash

Copy

Copy

.glyphicon
floppydisk

.glyphicon
floppyopen

Copy

Copy

.glyphicon
floppyremove

.glyphicon
floppysave

Copy

Copy

.glyphicon
floppysaved

.glyphicon
folderclose

Copy

Copy

.glyphicon
folderopen

.glyphicon
font

Copy

Copy

.glyphicon
forward

.glyphicon
fullscreen

Copy

Copy

.glyphicon
gbp

.glyphicon
gift

Copy

Copy

.glyphicon
glass

.glyphicon
globe

Copy

Copy

.glyphicon
handdown

.glyphicon
handleft

Copy

Copy

.glyphicon
handright

.glyphicon
handup

Copy

Copy

.glyphicon
hdvideo

.glyphicon
hdd

Copy

Copy

.glyphicon
header

.glyphicon
headphones

Copy

Copy

.glyphicon
heart

.glyphicon
heartempty

Copy

Copy

.glyphicon
home

.glyphicon
import

Copy

Copy

.glyphicon
inbox

.glyphicon
indentleft

Copy

Copy

.glyphicon
indentright

.glyphicon
infosign

Copy

Copy

.glyphicon
italic

.glyphicon
leaf

Copy

Copy

.glyphicon
link

.glyphicon
list

Copy

Copy

.glyphicon
listalt

.glyphicon
lock

Copy

Copy

.glyphicon
login

.glyphicon
logout

Copy

Copy

.glyphicon
magnet

.glyphicon
mapmarker

Copy

Copy

.glyphicon
minus

.glyphicon
minussign

Copy

Copy

.glyphicon
move

.glyphicon
music

Copy

Copy

.glyphicon
newwindow

.glyphicon
off

Copy

Copy

.glyphicon
ok

.glyphicon
okcircle

Copy

Copy

.glyphicon
oksign

.glyphicon
open

Copy

Copy

.glyphicon
paperclip

.glyphicon
pause

Copy

Copy

.glyphicon
pencil

.glyphicon
phone

Copy

Copy

.glyphicon
phonealt

.glyphicon
picture

Copy

Copy

.glyphicon
plane

.glyphicon
play

Copy

Copy

.glyphicon
playcircle

.glyphicon
plus

Copy

Copy

.glyphicon
plussign

.glyphicon
print

Copy

Copy

.glyphicon
pushpin

.glyphicon
qrcode

Copy

Copy

.glyphicon
questionsign

.glyphicon
random

Copy

Copy

.glyphicon
record

.glyphicon
refresh

Copy

Copy

.glyphicon
registrationmark

.glyphicon
remove

Copy

Copy

.glyphicon
removecircle

.glyphicon
removesign

Copy

Copy

.glyphicon
repeat

.glyphicon
resizefull

Copy

Copy

.glyphicon
resizehorizontal

.glyphicon
resizesmall

Copy

Copy

.glyphicon
resizevertical

.glyphicon
retweet

Copy

Copy

.glyphicon
road

.glyphicon
save

Copy

Copy

.glyphicon
saved

.glyphicon
screenshot

Copy

Copy

.glyphicon
sdvideo

.glyphicon
search

Copy

Copy

.glyphicon
send

.glyphicon
share

Copy

Copy

.glyphicon
sharealt

.glyphicon
shoppingcart

Copy

Copy

.glyphicon
signal

.glyphicon
sort

Copy

Copy

.glyphicon
sortbyalphabet

.glyphicon
sortbyalphabetalt

Copy

Copy

.glyphicon
sortbyattributes

.glyphicon
sortbyattributesalt

Copy

Copy

.glyphicon
sortbyorder

.glyphicon
sortbyorderalt

Copy

Copy

.glyphicon
sound51

.glyphicon
sound61

Copy

Copy

.glyphicon
sound71

.glyphicon
sounddolby

Copy

Copy

.glyphicon
soundstereo

.glyphicon
star

Copy

Copy

.glyphicon
starempty

.glyphicon
stats

Copy

Copy

.glyphicon
stepbackward

.glyphicon
stepforward

Copy

Copy

.glyphicon
stop

.glyphicon
subtitles

Copy

Copy

.glyphicon
tag

.glyphicon
tags

Copy

Copy

.glyphicon
tasks

.glyphicon
textheight

Copy

Copy

.glyphicon
textwidth

.glyphicon
th

Copy

Copy

.glyphicon
thlarge

.glyphicon
thlist

Copy

Copy

.glyphicon
thumbsdown

.glyphicon
thumbsup

Copy

Copy

.glyphicon
time

.glyphicon
tint

Copy

Copy

.glyphicon
tower

.glyphicon
transfer

Copy

Copy

.glyphicon
trash

.glyphicon
treeconifer

Copy

Copy

.glyphicon
treedeciduous

.glyphicon
unchecked

Copy

Copy

.glyphicon
upload

.glyphicon
usd

Copy

Copy

.glyphicon
user

.glyphicon
volumedown

Copy

Copy

.glyphicon
volumeoff

.glyphicon
volumeup

Copy

Copy

.glyphicon
warningsign

.glyphicon
wrench

Copy

Copy

.glyphicon
zoomin

.glyphicon
zoomout

Copy

Copy

How to Use Bootstrap 3 Glyphicons

Glyphicons are great! They're one of my favourite additions to native Bootstrap 3.

I've been working with these glyphs quite a lot, so I thought I'd make a cheat
sheet for myself.

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.

What are Glyphicons?

Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer
to call them) that you can use in a webpage. They're implemented in Bootstrap as
an icon font a custom font that contains these glyphs instead of letters.
If you're creating a site based on Bootstrap 3, you already have access to all 200
glyphs in the Glyphicons set.
Don't know how to set up Bootstrap? Go check out the offical getting started
guide (http://getbootstrap.com/getting-started/)
(http://getbootstrap.com/getting-started/),, or simply just include these two
lines in your <head> tag:
CSS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

Javacript:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

(Bootstrap hosting very kindly provided by bootstrapcdn.com

(http://www.bootstrapcdn.com/#fontawesome_tab)))
(http://www.bootstrapcdn.com/#fontawesome_tab)

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-weswitched-from-an-icon-font-to-svg/)

Who made them?

The glyphicons you see in Bootstrap are part of a set called Glyphicons Halflings
and were created by the very talented Jan Kova
Kovak over at GLYPHICONS
(http://glyphicons.com/)..
(http://glyphicons.com/)

Am I allowed to use them?

Short answer: absolutely! Jan has kindly released them under the same MIT
license as Bootstrap (https://github.com/twbs/bootstrap#copyright-and-license)
(https://github.com/twbs/bootstrap#copyright-and-license)..
If you'd like more detail, please check out Jan's licensing page
(http://glyphicons.com/license/)..
(http://glyphicons.com/license/)

How do they work?

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:

<spanclass="
<spanclass=
"glyphicon
glyphicon
glyphiconhome
glyphiconhome">
"></span>
</span>

The first classglyphicon

classglyphiconis
is a base class. It tells the <span> tag, "hey,
heads up: this is going to be an icon."
The second class (in this example, glyphicon-home
glyphicon-home)) points the specific

icon you want to use. This one is an icon of a house!

To use a HTML Tag for an icon, simply copy and paste
<iclass="
<iclass=
"glyphicon
glyphicon
glyphiconhome
glyphiconhome">
"></i>
</i> anywhere within the
your page.

<body>

Warning: Don't mix glyphicons with other components

Icon classes shouldn't be combined with other elements in Bootstrap.
They're designed to be standalone.

2. Unicode HTML Entity

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
EXAMPLE

Star
<buttontype="button"
<buttontype="button"
class=
class="btnbtndefaultbtnlg"
"btnbtndefaultbtnlg">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconstar
glyphiconstar"
"></span>Star
</button>

Toolbars

of

EXAMPLE

<divclass="btntoolbar"role=
<divclass="btntoolbar"
role="toolbar"
"toolbar">
>
<divclass="btngroup">
<divclass=
"btngroup">

<buttontype=

<buttontype="button"
"button"
class=
class="btnbtndefault"
"btnbtndefault">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconalignleft
glyphiconalignleft"
"></span>
</button>

</button>
<buttontype=

<buttontype="button"
"button"
class=
class="btnbtndefault"
"btnbtndefault">
>
<spanclass="glyphicon
<spanclass="
glyphiconglyphiconaligncenter
glyphiconaligncenter"
"></span>
</button>

</button>
<buttontype=

<buttontype="button"
"button"
class=
class="btnbtndefault"
"btnbtndefault">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconalignright
glyphiconalignright"
">
</span>
</button>

</button>
<buttontype=

<buttontype="button"
"button"
class=
class="btnbtndefault"
"btnbtndefault">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconalignjustify
glyphiconalignjustify"
">
</span>
</button>

</button>
</div>
</div>

Navigation
EXAMPLE

Home

Shop

About

<ulclass="navnavpills">
<ulclass="navnavpills"
>
<li>
<ahref=

<ahref="index.html"
"index.html">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconhome
glyphiconhome"
"></span>Home
</a>

</a>
</li>
<li>
<ahref=

<ahref="shop.html"
"shop.html">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconshoppingcart
glyphiconshoppingcart"
"></span>Shop
</a>

</a>
</li>
<li>
<ahref=

<ahref="about.html"
"about.html">
>
<spanclass="glyphicon
<spanclass=
"glyphiconglyphiconinfosign
glyphiconinfosign"
"></span>About
</a>

</a>
</li>
</ul>

Form Inputs
EXAMPLE

Email address

Password

<divclass="inputgroupinputgrouplg">
<divclass="inputgroupinputgrouplg"
>
<spanclass="inputgroupaddon"
<spanclass=
"inputgroupaddon">
>
<spanclass="
<spanclass=
"glyphicon
glyphicon
glyphiconenvelope
glyphiconenvelope"
"></span>
</span>
<inputclass=

<inputclass="formcontrol"
"formcontrol"
type=
type="text"
"text"
placeholder=
placeholder="Emailaddress"
"Emailaddress">
>
</div>
<divclass="inputgroupinputgrouplg"
<divclass=
"inputgroupinputgrouplg">
>
<spanclass="inputgroupaddon"
<spanclass=
"inputgroupaddon">
>
<spanclass="
<spanclass=
"glyphicon
glyphicon
glyphiconlock
glyphiconlock"
"></span>
</span>
<inputclass=

<inputclass="formcontrol"
"formcontrol"
type=
type="password"
"password"
placeholder=
placeholder="Password"
"Password">
>
</div>

Additional Reading
Want more info on the Glyphicons in Bootstrap 3? Check out the official Bootstrap
documentation (http://getbootstrap.com/components/#glyphicons)
(http://getbootstrap.com/components/#glyphicons)..

About me
(http://twitter.com/jamescroft)

My name is James Croft (http://twitter.com/jamescroft)

(http://twitter.com/jamescroft).. I'm a web developer from
Brisbane, Australia.
If you found this page useful, consider buying a Bootstrap Cheat Sheet poster
(http://bootstrapcheatsheets.com/shop) for your wall!

My thanks to Bootstrap (http://getbootstrap.com)

(http://getbootstrap.com),, Glyphicons (http://glyphicons.com)
(http://glyphicons.com),, Github Pages
(http://pages.github.com),, Google Fonts (http://www.google.com/fonts)
(http://pages.github.com)
(http://www.google.com/fonts),, jQuery (http://jquery.com)
and ZeroClipboard (https://github.com/zeroclipboard/zeroclipboard)
(https://github.com/zeroclipboard/zeroclipboard)..