Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

Embed Size (px)

Citation preview

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    1/33

    BOOTSTRAP 3 GLYPHICONSOOTSTR P 3 GLYPHICONS

    .glyphicon‐glyphicon‐adjustdjust

    Copyopy

    .glyphicon‐glyphicon‐align‐centerlign‐center

    Copyopy

    .glyphicon‐glyphicon‐align‐justifylign‐justify

    Copyopy

    .glyphicon‐glyphicon‐align‐leftlign‐left

    Copyopy

    .glyphicon‐glyphicon‐align‐rightlign‐right

    Copyopy

    .glyphicon‐glyphicon‐arrow‐downrrow‐down

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    2/33

    .glyphicon‐glyphicon‐

    arrow‐leftrrow‐left

    Copyopy

    .glyphicon‐glyphicon‐

    arrow‐rightrrow‐right

    Copyopy

    .glyphicon‐glyphicon‐arrow‐uprrow‐up

    Copyopy

    .glyphicon‐glyphicon‐asterisksterisk

    *

    Copyopy

    .glyphicon‐glyphicon‐backward ckw rd

    Copyopy

    .glyphicon‐glyphicon‐ban‐circle n‐circle

    Copyopy

    .glyphicon‐glyphicon‐

    barcode rcode

    .glyphicon‐glyphicon‐

    bellell

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    3/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐boldold

    Copyopy

    .glyphicon‐glyphicon‐bookook

    Copyopy

    .glyphicon‐glyphicon‐bookmarkookm rk

    Copyopy

    .glyphicon‐glyphicon‐briefcaseriefc se

    Copyopy

    .glyphicon‐glyphicon‐bullhornullhorn

    Copyopy

    .glyphicon‐glyphicon‐calendar lend r

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    4/33

    .glyphicon‐glyphicon‐camera mer

    Copyopy

    .glyphicon‐glyphicon‐certificateertific te

    Copyopy

    .glyphicon‐glyphicon‐checkheck

    Copyopy

    .glyphicon‐glyphicon‐chevron‐downhevron‐down

    Copyopy

    .glyphicon‐glyphicon‐chevron‐lefthevron‐left

    Copyopy

    .glyphicon‐glyphicon‐chevron‐righthevron‐right

    Copyopy

    .glyphicon‐glyphicon‐chevron‐uphevron‐up

    Copyopy

    .glyphicon‐glyphicon‐circle‐arrow‐downircle‐ rrow‐down

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    5/33

    .glyphicon‐glyphicon‐circle‐arrow‐leftircle‐ rrow‐left

    Copyopy

    .glyphicon‐glyphicon‐circle‐arrow‐rightircle‐ rrow‐right

    Copyopy

    .glyphicon‐glyphicon‐circle‐arrow‐upircle‐ rrow‐up

    Copyopy

    .glyphicon‐glyphicon‐cloudloud

    Copyopy

    .glyphicon‐glyphicon‐cloud‐downloadloud‐downlo d

    Copyopy

    .glyphicon‐glyphicon‐cloud‐uploadloud‐uplo d

    Copyopy

    .glyphicon‐glyphicon‐cogog

    Copyopy

    .glyphicon‐glyphicon‐collapse‐downoll pse‐down

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    6/33

    .glyphicon‐glyphicon‐

    collapse‐upoll pse‐up

    Copyopy

    .glyphicon‐glyphicon‐

    commentomment

    Copyopy

    .glyphicon‐glyphicon‐compressedompressed

    Copyopy

    .glyphicon‐glyphicon‐copyright‐markopyright‐m rk

    Copyopy

    .glyphicon‐glyphicon‐credit‐cardredit‐c rd

    Copyopy

    .glyphicon‐glyphicon‐cutleryutlery

    Copyopy

    .glyphicon‐glyphicon‐

    dashboard sh o rd

    .glyphicon‐glyphicon‐

    downloadownlo d

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    7/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐download‐altownlo d‐ lt

    Copyopy

    .glyphicon‐glyphicon‐earphone rphone

    Copyopy

    .glyphicon‐glyphicon‐editdit

    Copyopy

    .glyphicon‐glyphicon‐ejectject

    Copyopy

    .glyphicon‐glyphicon‐envelopenvelope

    Copyopy

    .glyphicon‐glyphicon‐eurouro

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    8/33

    .glyphicon‐glyphicon‐exclamation‐signxcl m tion‐sign

    Copyopy

    .glyphicon‐glyphicon‐expandxp nd

    Copyopy

    .glyphicon‐glyphicon‐exportxport

    Copyopy

    .glyphicon‐glyphicon‐eye‐closeye‐close

    Copyopy

    .glyphicon‐glyphicon‐eye‐openye‐open

    Copyopy

    .glyphicon‐glyphicon‐facetime‐video cetime‐video

    Copyopy

    .glyphicon‐glyphicon‐fast‐backward st‐ ckw rd

    Copyopy

    .glyphicon‐glyphicon‐fast‐forward st‐forw rd

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    9/33

    .glyphicon‐glyphicon‐fileile

    Copyopy

    .glyphicon‐glyphicon‐filmilm

    Copyopy

    .glyphicon‐glyphicon‐filterilter

    Copyopy

    .glyphicon‐glyphicon‐fireire

    Copyopy

    .glyphicon‐glyphicon‐flagl g

    Copyopy

    .glyphicon‐glyphicon‐flashl sh

    Copyopy

    .glyphicon‐glyphicon‐floppy‐diskloppy‐disk

    Copyopy

    .glyphicon‐glyphicon‐floppy‐openloppy‐open

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    10/33

    .glyphicon‐glyphicon‐

    floppy‐removeloppy‐remove

    Copyopy

    .glyphicon‐glyphicon‐

    floppy‐saveloppy‐s ve

    Copyopy

    .glyphicon‐glyphicon‐floppy‐savedloppy‐s ved

    Copyopy

    .glyphicon‐glyphicon‐folder‐closeolder‐close

    Copyopy

    .glyphicon‐glyphicon‐folder‐openolder‐open

    Copyopy

    .glyphicon‐glyphicon‐fontont

    Copyopy

    .glyphicon‐glyphicon‐

    forwardorw rd

    .glyphicon‐glyphicon‐

    fullscreenullscreen

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    11/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐gbp p

    Copyopy

    .glyphicon‐glyphicon‐giftift

    Copyopy

    .glyphicon‐glyphicon‐glassl ss

    Copyopy

    .glyphicon‐glyphicon‐globelo e

    Copyopy

    .glyphicon‐glyphicon‐hand‐down nd‐down

    Copyopy

    .glyphicon‐glyphicon‐hand‐left nd‐left

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    12/33

    .glyphicon‐glyphicon‐hand‐right nd‐right

    Copyopy

    .glyphicon‐glyphicon‐hand‐up nd‐up

    Copyopy

    .glyphicon‐glyphicon‐hd‐videod‐video

    Copyopy

    .glyphicon‐glyphicon‐hdddd

    Copyopy

    .glyphicon‐glyphicon‐headere der

    Copyopy

    .glyphicon‐glyphicon‐headphonese dphones

    Copyopy

    .glyphicon‐glyphicon‐hearte rt

    Copyopy

    .glyphicon‐glyphicon‐heart‐emptye rt‐empty

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    13/33

    .glyphicon‐glyphicon‐homeome

    Copyopy

    .glyphicon‐glyphicon‐importmport

    Copyopy

    .glyphicon‐glyphicon‐inboxn ox

    Copyopy

    .glyphicon‐glyphicon‐indent‐leftndent‐left

    Copyopy

    .glyphicon‐glyphicon‐indent‐rightndent‐right

    Copyopy

    .glyphicon‐glyphicon‐info‐signnfo‐sign

    Copyopy

    .glyphicon‐glyphicon‐italict lic

    Copyopy

    .glyphicon‐glyphicon‐leafe f

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    14/33

    .glyphicon‐glyphicon‐

    linkink

    Copyopy

    .glyphicon‐glyphicon‐

    listist

    Copyopy

    .glyphicon‐glyphicon‐list‐altist‐ lt

    Copyopy

    .glyphicon‐glyphicon‐lockock

    Copyopy

    .glyphicon‐glyphicon‐log‐inog‐in

    Copyopy

    .glyphicon‐glyphicon‐log‐outog‐out

    Copyopy

    .glyphicon‐glyphicon‐

    magnet gnet

    .glyphicon‐glyphicon‐

    map‐marker p‐m rker

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    15/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐minusinus

    Copyopy

    .glyphicon‐glyphicon‐minus‐signinus‐sign

    Copyopy

    .glyphicon‐glyphicon‐moveove

    Copyopy

    .glyphicon‐glyphicon‐musicusic

    Copyopy

    .glyphicon‐glyphicon‐new‐windowew‐window

    Copyopy

    .glyphicon‐glyphicon‐offff

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    16/33

    .glyphicon‐glyphicon‐okk

    Copyopy

    .glyphicon‐glyphicon‐ok‐circlek‐circle

    Copyopy

    .glyphicon‐glyphicon‐ok‐signk‐sign

    Copyopy

    .glyphicon‐glyphicon‐openpen

    Copyopy

    .glyphicon‐glyphicon‐paperclip perclip

    Copyopy

    .glyphicon‐glyphicon‐pause use

    Copyopy

    .glyphicon‐glyphicon‐pencilencil

    Copyopy

    .glyphicon‐glyphicon‐phonehone

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    17/33

    .glyphicon‐glyphicon‐phone‐althone‐ lt

    Copyopy

    .glyphicon‐glyphicon‐pictureicture

    Copyopy

    .glyphicon‐glyphicon‐planel ne

    Copyopy

    .glyphicon‐glyphicon‐playl y

    Copyopy

    .glyphicon‐glyphicon‐play‐circlel y‐circle

    Copyopy

    .glyphicon‐glyphicon‐pluslus

    +

    Copyopy

    .glyphicon‐glyphicon‐plus‐signlus‐sign

    Copyopy

    .glyphicon‐glyphicon‐printrint

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    18/33

    .glyphicon‐glyphicon‐

    pushpinushpin

    Copyopy

    .glyphicon‐glyphicon‐

    qrcodercode

    Copyopy

    .glyphicon‐glyphicon‐question‐signuestion‐sign

    Copyopy

    .glyphicon‐glyphicon‐random ndom

    Copyopy

    .glyphicon‐glyphicon‐recordecord

    Copyopy

    .glyphicon‐glyphicon‐refreshefresh

    Copyopy

    .glyphicon‐glyphicon‐

    registration‐markegistr tion‐m rk

    .glyphicon‐glyphicon‐

    removeemove

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    19/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐remove‐circleemove‐circle

    Copyopy

    .glyphicon‐glyphicon‐remove‐signemove‐sign

    Copyopy

    .glyphicon‐glyphicon‐repeatepe t

    Copyopy

    .glyphicon‐glyphicon‐resize‐fullesize‐full

    Copyopy

    .glyphicon‐glyphicon‐resize‐horizontalesize‐horizont l

    Copyopy

    .glyphicon‐glyphicon‐resize‐smallesize‐sm ll

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    20/33

    .glyphicon‐glyphicon‐resize‐verticalesize‐vertic l

    Copyopy

    .glyphicon‐glyphicon‐retweetetweet

    Copyopy

    .glyphicon‐glyphicon‐roado d

    Copyopy

    .glyphicon‐glyphicon‐save ve

    Copyopy

    .glyphicon‐glyphicon‐saved ved

    Copyopy

    .glyphicon‐glyphicon‐screenshotcreenshot

    Copyopy

    .glyphicon‐glyphicon‐sd‐videod‐video

    Copyopy

    .glyphicon‐glyphicon‐searche rch

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    21/33

    .glyphicon‐glyphicon‐sendend

    Copyopy

    .glyphicon‐glyphicon‐shareh re

    Copyopy

    .glyphicon‐glyphicon‐share‐alth re‐ lt

    Copyopy

    .glyphicon‐glyphicon‐shopping‐carthopping‐c rt

    Copyopy

    .glyphicon‐glyphicon‐signalign l

    Copyopy

    .glyphicon‐glyphicon‐sortort

    Copyopy

    .glyphicon‐glyphicon‐sort‐by‐alphabetort‐ y‐ lph et

    Copyopy

    .glyphicon‐glyphicon‐sort‐by‐alphabet‐altort‐ y‐ lph et‐ lt

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    22/33

    .glyphicon‐glyphicon‐

    sort‐by‐attributesort‐ y‐ ttri utes

    Copyopy

    .glyphicon‐glyphicon‐

    sort‐by‐attributes‐altort‐ y‐ ttri utes‐ lt

    Copyopy

    .glyphicon‐glyphicon‐sort‐by‐orderort‐ y‐order

    Copyopy

    .glyphicon‐glyphicon‐sort‐by‐order‐altort‐ y‐order‐ lt

    Copyopy

    .glyphicon‐glyphicon‐sound‐5‐1ound‐5‐1

    Copyopy

    .glyphicon‐glyphicon‐sound‐6‐1ound‐6‐1

    Copyopy

    .glyphicon‐glyphicon‐

    sound‐7‐1ound‐7‐1

    .glyphicon‐glyphicon‐

    sound‐dolbyound‐dol y

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    23/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐sound‐stereoound‐stereo

    Copyopy

    .glyphicon‐glyphicon‐start r

    Copyopy

    .glyphicon‐glyphicon‐star‐emptyt r‐empty

    Copyopy

    .glyphicon‐glyphicon‐statst ts

    Copyopy

    .glyphicon‐glyphicon‐step‐backwardtep‐ ckw rd

    Copyopy

    .glyphicon‐glyphicon‐step‐forwardtep‐forw rd

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    24/33

    .glyphicon‐glyphicon‐stoptop

    Copyopy

    .glyphicon‐glyphicon‐subtitlesu titles

    Copyopy

    .glyphicon‐glyphicon‐tag g

    Copyopy

    .glyphicon‐glyphicon‐tags gs

    Copyopy

    .glyphicon‐glyphicon‐tasks sks

    Copyopy

    .glyphicon‐glyphicon‐text‐heightext‐height

    Copyopy

    .glyphicon‐glyphicon‐text‐widthext‐width

    Copyopy

    .glyphicon‐glyphicon‐thh

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    25/33

    .glyphicon‐glyphicon‐th‐largeh‐l rge

    Copyopy

    .glyphicon‐glyphicon‐th‐listh‐list

    Copyopy

    .glyphicon‐glyphicon‐thumbs‐downhum s‐down

    Copyopy

    .glyphicon‐glyphicon‐thumbs‐uphum s‐up

    Copyopy

    .glyphicon‐glyphicon‐timeime

    Copyopy

    .glyphicon‐glyphicon‐tintint

    Copyopy

    .glyphicon‐glyphicon‐towerower

    Copyopy

    .glyphicon‐glyphicon‐transferr nsfer

    Copyopy

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    26/33

    .glyphicon‐glyphicon‐

    trashr sh

    Copyopy

    .glyphicon‐glyphicon‐

    tree‐coniferree‐conifer

    Copyopy

    .glyphicon‐glyphicon‐tree‐deciduousree‐deciduous

    Copyopy

    .glyphicon‐glyphicon‐uncheckednchecked

    Copyopy

    .glyphicon‐glyphicon‐uploadplo d

    Copyopy

    .glyphicon‐glyphicon‐usdsd

    Copyopy

    .glyphicon‐glyphicon‐

    userser

    .glyphicon‐glyphicon‐

    volume‐downolume‐down

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    27/33

    Copyopy Copyopy

    .glyphicon‐glyphicon‐volume‐offolume‐off

    Copyopy

    .glyphicon‐glyphicon‐volume‐upolume‐up

    Copyopy

    .glyphicon‐glyphicon‐warning‐sign rning‐sign

    Copyopy

    .glyphicon‐glyphicon‐wrenchrench

    Copyopy

    .glyphicon‐glyphicon‐zoom‐inoom‐in

    Copyopy

    .glyphicon‐glyphicon‐zoom‐outoom‐out

    Copyopy

    How to Use Bootstrap 3 Glyphiconsow to Use Bootstrap 3 Glyphicons

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    28/33

    Glyphicons are great! They're one of my favourite additions to native Bootstrap 3.lyphicons 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've been working with these glyphs quite a lot, so I thought I'd make a cheatsheet for myself.heet for myself.

    Cheat sheet? heat sheet? Yeah! To use this cheat sheet, simply find the glyphicon you want to use and clickeah! To use this cheat sheet, simply find the glyphicon you want to use and clickthe copy button. This will add the complete HTML code for that glyphicon (spanhe copy button. This will add the complete HTML code for that glyphicon (spantag and all) to your clipboard, ready to paste into your web development tool of ag and all) to your clipboard, ready to paste into your web development tool ofchoice.hoice.

    What are Glyphicons? hat are Glyphicons?Glyphicons are basically little symbols, icons, or pictograms (whatever you preferlyphicons are basically little symbols, icons, or pictograms (whatever you preferto call them) that you can use in a webpage. They're implemented in Bootstrap aso call them) that you can use in a webpage. They're implemented in Bootstrap asan icon font — a custom font that contains these glyphs instead of letters.n 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 200f you're creating a site based on Bootstrap 3, you already have access to all 200

    glyphs in the Glyphicons set.lyphs in the Glyphicons set.Don't know how to set up Bootstrap? Go check out the officalon't know how to set up Bootstrap? Go check out the offical getting startedetting startedguideuide (http://getbootstrap.com/getting-started/)(http://getbootstrap.com/getting-started/) , or simply just include these two or simply just include these twolines in yourines in your head> tag:tag:

    CSSSS

    link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    Javacript:avacript:

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

    (Bootstrap hosting very kindly provided byBootstrap hosting very kindly provided by bootstrapcdn.comootstrapcdn.com(http://www.bootstrapcdn.com/#fontawesome_tab)http://www.bootstrapcdn.com/#fontawesome_tab) )

    Counterpointounterpoint

    http://www.bootstrapcdn.com/#fontawesome_tabhttp://getbootstrap.com/getting-started/

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    29/33

    Icon fonts aren't the only way to implement icons on the web. If you'recon fonts aren't the only way to implement icons on the web. If you'relooking for a explanation of using icon fonts vs. SVG files (another possibleooking for a explanation of using icon fonts vs. SVG files (another possiblemethod), I'd suggest reading this excellent post by Ian Feather:ethod), I'd suggest reading this excellent post by Ian Feather: Ten reasonsen reasonswe switched from an icon font to SVGe switched from an icon font to SVG . (http://ianfeather.co.uk/ten-reasons-we-(http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/)witched-from-an-icon-font-to-svg/)

    Who made them? ho made them?The glyphicons you see in Bootstrap are part of a set calledhe glyphicons you see in Bootstrap are part of a set called Glyphicons Halflingslyphicons Halflingsand were created by the very talented Jan Kovand were created by the very talented Jan Kova ř ík over atk over at GLYPHICONSLYPHICONS(http://glyphicons.com/)http://glyphicons.com/) .

    Am I allowed to use them? m I allowed to use them?Short answer: absolutely! Jan has kindly released them under thehort answer: absolutely! Jan has kindly released them under the same MITame MITlicense as Bootstrapicense 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 outf you'd like more detail, please check out Jan's licensing pagean's licensing page(http://glyphicons.com/license/)http://glyphicons.com/license/) .

    How do they work? ow do they work?So, how do I add an icon to my webpage? Well, Glyphicons can be used on theo, how do I add an icon to my webpage? Well, Glyphicons can be used on theweb in one of three ways.eb in one of three ways.

    1. HTML Tag. HTML Tag

    You can use a simpleou can use a simple span> tag to place an glyphicon in your page, like this:tag to place an glyphicon in your page, like this:

    >/span> ==

    The first class—he first class— glyphiconlyphi on —is a base class. It tells theis a base class. It tells the span> tag, "hey,tag, "hey,heads up: this is going to be an icon."eads up: this is going to be an icon."The second class (in this example,he second class (in this example, glyphicon-homelyphi on-hom ) points thepoints the specificpecific

    http://glyphicons.com/license/http://glyphicons.com/http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/https://github.com/twbs/bootstrap#copyright-and-license

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    30/33

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

    To use a HTML Tag for an icon, simply copy and pasteo use a HTML Tag for an icon, simply copy and paste>/i> anywhere within theanywhere within the body> of of

    your page.our page.

    Warning: Don't mix glyphicons with other componentsarning: Don't mix glyphicons with other componentsIcon classes shouldn't be combined with other elements in Bootstrap.con classes shouldn't be combined with other elements in Bootstrap.They're designed to be standalone.hey're designed to be standalone.

    2. Unicode HTML Entity. Unicode HTML Entity

    3. CSS Rule. CSS Rule

    Examplesxamples

    You can use glyphicons in a variety of ways; in buttons, button groups for aou can use glyphicons in a variety of ways; in buttons, button groups for atoolbar, navigation or prepended form inputs. Here are a few examples of oolbar, navigation or prepended form inputs. Here are a few examples ofglyphicons in action:lyphicons in action:

    Buttonsuttons

    Toolbarsoolbars

    StarStar

    EXAMPLEX MPLE

    http://-/?-http://-/?-

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    31/33

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    32/33

    Form Inputsorm Inputs

    /ul>

    /div>

    Email addressmail address✉

    Passwordassword

    EXAMPLEX MPLE

  • 8/17/2019 Bootstrap 3 Glyphicons _ Bootstrap Cheat Sheets

    33/33

    Additional Readingdditional ReadingWant more info on the Glyphicons in Bootstrap 3? Check out theant more info on the Glyphicons in Bootstrap 3? Check out the official Bootstrapfficial Bootstrapdocumentationocumentation (http://getbootstrap.com/components/#glyphicons)(http://getbootstrap.com/components/#glyphicons) .

    About mebout me

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

    My name isy name is James Croftames Croft (http://twitter.com/jamescroft)(http://twitter.com/jamescroft) . I'm a web developer from I'm a web developer fromBrisbane, Australia.risbane, ustralia.

    If you found this page useful, consider buyingf you found this page useful, consider buying a Bootstrap Cheat Sheet poster Bootstrap Cheat Sheet poster(http://bootstrapcheatsheets.com/shop)http://bootstrapcheatsheets.com/shop) for your wall!for your wall!

    My thanks toy thanks to Bootstrapootstrap (http://getbootstrap.com)(http://getbootstrap.com) , Glyphiconslyphicons (http://glyphicons.com)(http://glyphicons.com) , Github Pagesithub Pages(http://pages.github.com)http://pages.github.com) , Google Fontsoogle Fonts (http://www.google.com/fonts)(http://www.google.com/fonts) , jQueryQuery (http://jquery.com)(http://jquery.com)

    andnd ZeroClipboarderoClipboard (https://github.com/zeroclipboard/zeroclipboard)(https://github.com/zeroclipboard/zeroclipboard) .

    http://twitter.com/jamescrofthttp://pages.github.com/http://getbootstrap.com/http://twitter.com/jamescrofthttp://bootstrapcheatsheets.com/shophttp://www.google.com/fontshttp://jquery.com/http://glyphicons.com/http://getbootstrap.com/components/#glyphiconshttps://github.com/zeroclipboard/zeroclipboard