Cara Menggunaan Icon Bootstrap

Cara Menggunaan Icon BootstrapShare on FacebookTwitterTwitter
glyphicons

Cara menggunakan Icon bootstrap sangatlah mudah, kita hanya cukup memberi nama class sesuai dengan icon yang akan kita pakai suatu contoh nama class icon = glyphicon glyphicon-picture, kita bisa menerapkan seperti ini :

<span class='glyphicon glyphicon-picture'></span>

dan hasilnya akan seperti ini :

Berikut list nama class icon bootstrap

Icon Nama Class Contoh Code HTML
glyphicon glyphicon-asterisk <span class="glyphicon glyphicon-asterisk"></span>
glyphicon glyphicon-plus <span class="glyphicon glyphicon-plus"></span>
glyphicon glyphicon-minus <span class="glyphicon glyphicon-minus"></span>
glyphicon glyphicon-eur <span class="glyphicon glyphicon-eur"></span>
glyphicon glyphicon-euro <span class="glyphicon glyphicon-euro"></span>
glyphicon glyphicon-cloud <span class="glyphicon glyphicon-cloud"></span>
glyphicon glyphicon-envelope <span class="glyphicon glyphicon-envelope"></span>
glyphicon glyphicon-pencil <span class="glyphicon glyphicon-pencil"></span>
glyphicon glyphicon-glass <span class="glyphicon glyphicon-glass"></span>
glyphicon glyphicon-music <span class="glyphicon glyphicon-music"></span>
glyphicon glyphicon-search <span class="glyphicon glyphicon-search"></span>
glyphicon glyphicon-heart <span class="glyphicon glyphicon-heart"></span>
glyphicon glyphicon-star <span class="glyphicon glyphicon-star"></span>
glyphicon glyphicon-star-empty <span class="glyphicon glyphicon-star-empty"></span>
glyphicon glyphicon-user <span class="glyphicon glyphicon-user"></span>
glyphicon glyphicon-film <span class="glyphicon glyphicon-film"></span>
glyphicon glyphicon-th-large <span class="glyphicon glyphicon-th-large"></span>
glyphicon glyphicon-th <span class="glyphicon glyphicon-th"></span>
glyphicon glyphicon-th-list <span class="glyphicon glyphicon-th-list"></span>
glyphicon glyphicon-ok <span class="glyphicon glyphicon-ok"></span>
glyphicon glyphicon-remove <span class="glyphicon glyphicon-remove"></span>
glyphicon glyphicon-zoom-in <span class="glyphicon glyphicon-zoom-in"></span>
glyphicon glyphicon-zoom-out <span class="glyphicon glyphicon-zoom-out"></span>
glyphicon glyphicon-off <span class="glyphicon glyphicon-off"></span>
glyphicon glyphicon-signal <span class="glyphicon glyphicon-signal"></span>
glyphicon glyphicon-cog <span class="glyphicon glyphicon-cog"></span>
glyphicon glyphicon-trash <span class="glyphicon glyphicon-trash"></span>
glyphicon glyphicon-home <span class="glyphicon glyphicon-home"></span>
glyphicon glyphicon-file <span class="glyphicon glyphicon-file"></span>
glyphicon glyphicon-time <span class="glyphicon glyphicon-time"></span>
glyphicon glyphicon-road <span class="glyphicon glyphicon-road"></span>
glyphicon glyphicon-download-alt <span class="glyphicon glyphicon-download-alt"></span>
glyphicon glyphicon-download <span class="glyphicon glyphicon-download"></span>
glyphicon glyphicon-upload <span class="glyphicon glyphicon-upload"></span>
glyphicon glyphicon-inbox <span class="glyphicon glyphicon-inbox"></span>
glyphicon glyphicon-play-circle <span class="glyphicon glyphicon-play-circle"></span>
glyphicon glyphicon-repeat <span class="glyphicon glyphicon-repeat"></span>
glyphicon glyphicon-refresh <span class="glyphicon glyphicon-refresh"></span>
glyphicon glyphicon-list-alt <span class="glyphicon glyphicon-list-alt"></span>
glyphicon glyphicon-lock <span class="glyphicon glyphicon-lock"></span>
glyphicon glyphicon-flag <span class="glyphicon glyphicon-flag"></span>
glyphicon glyphicon-headphones <span class="glyphicon glyphicon-headphones"></span>
glyphicon glyphicon-volume-off <span class="glyphicon glyphicon-volume-off"></span>
glyphicon glyphicon-volume-down <span class="glyphicon glyphicon-volume-down"></span>
glyphicon glyphicon-volume-up <span class="glyphicon glyphicon-volume-up"></span>
glyphicon glyphicon-qrcode <span class="glyphicon glyphicon-qrcode"></span>
glyphicon glyphicon-barcode <span class="glyphicon glyphicon-barcode"></span>
glyphicon glyphicon-tag <span class="glyphicon glyphicon-tag"></span>
glyphicon glyphicon-tags <span class="glyphicon glyphicon-tags"></span>
glyphicon glyphicon-book <span class="glyphicon glyphicon-book"></span>
glyphicon glyphicon-bookmark <span class="glyphicon glyphicon-bookmark"></span>
glyphicon glyphicon-print <span class="glyphicon glyphicon-print"></span>
glyphicon glyphicon-camera <span class="glyphicon glyphicon-camera"></span>
glyphicon glyphicon-font <span class="glyphicon glyphicon-font"></span>
glyphicon glyphicon-bold <span class="glyphicon glyphicon-bold"></span>
glyphicon glyphicon-italic <span class="glyphicon glyphicon-italic"></span>
glyphicon glyphicon-text-height <span class="glyphicon glyphicon-text-height"></span>
glyphicon glyphicon-text-width <span class="glyphicon glyphicon-text-width"></span>
glyphicon glyphicon-align-left <span class="glyphicon glyphicon-align-left"></span>
glyphicon glyphicon-align-center <span class="glyphicon glyphicon-align-center"></span>
glyphicon glyphicon-align-right <span class="glyphicon glyphicon-align-right"></span>
glyphicon glyphicon-align-justify <span class="glyphicon glyphicon-align-justify"></span>
glyphicon glyphicon-list <span class="glyphicon glyphicon-list"></span>
glyphicon glyphicon-indent-left <span class="glyphicon glyphicon-indent-left"></span>
glyphicon glyphicon-indent-right <span class="glyphicon glyphicon-indent-right"></span>
glyphicon glyphicon-facetime-video <span class="glyphicon glyphicon-facetime-video"></span>
glyphicon glyphicon-picture <span class="glyphicon glyphicon-picture"></span>
glyphicon glyphicon-map-marker <span class="glyphicon glyphicon-map-marker"></span>
glyphicon glyphicon-adjust <span class="glyphicon glyphicon-adjust"></span>
glyphicon glyphicon-tint <span class="glyphicon glyphicon-tint"></span>
glyphicon glyphicon-edit <span class="glyphicon glyphicon-edit"></span>
glyphicon glyphicon-share <span class="glyphicon glyphicon-share"></span>
glyphicon glyphicon-check <span class="glyphicon glyphicon-check"></span>
glyphicon glyphicon-move <span class="glyphicon glyphicon-move"></span>
glyphicon glyphicon-step-backward <span class="glyphicon glyphicon-step-backward"></span>
glyphicon glyphicon-fast-backward <span class="glyphicon glyphicon-fast-backward"></span>
glyphicon glyphicon-backward <span class="glyphicon glyphicon-backward"></span>
glyphicon glyphicon-play <span class="glyphicon glyphicon-play"></span>
glyphicon glyphicon-pause <span class="glyphicon glyphicon-pause"></span>
glyphicon glyphicon-stop <span class="glyphicon glyphicon-stop"></span>
glyphicon glyphicon-forward <span class="glyphicon glyphicon-forward"></span>
glyphicon glyphicon-fast-forward <span class="glyphicon glyphicon-fast-forward"></span>
glyphicon glyphicon-step-forward <span class="glyphicon glyphicon-step-forward"></span>
glyphicon glyphicon-eject <span class="glyphicon glyphicon-eject"></span>
glyphicon glyphicon-chevron-left <span class="glyphicon glyphicon-chevron-left"></span>
glyphicon glyphicon-chevron-right <span class="glyphicon glyphicon-chevron-right"></span>
glyphicon glyphicon-plus-sign <span class="glyphicon glyphicon-plus-sign"></span>
glyphicon glyphicon-minus-sign <span class="glyphicon glyphicon-minus-sign"></span>
glyphicon glyphicon-remove-sign <span class="glyphicon glyphicon-remove-sign"></span>
glyphicon glyphicon-ok-sign <span class="glyphicon glyphicon-ok-sign"></span>
glyphicon glyphicon-question-sign <span class="glyphicon glyphicon-question-sign"></span>
glyphicon glyphicon-info-sign <span class="glyphicon glyphicon-info-sign"></span>
glyphicon glyphicon-screenshot <span class="glyphicon glyphicon-screenshot"></span>
glyphicon glyphicon-remove-circle <span class="glyphicon glyphicon-remove-circle"></span>
glyphicon glyphicon-ok-circle <span class="glyphicon glyphicon-ok-circle"></span>
glyphicon glyphicon-ban-circle <span class="glyphicon glyphicon-ban-circle"></span>
glyphicon glyphicon-arrow-left <span class="glyphicon glyphicon-arrow-left"></span>
glyphicon glyphicon-arrow-right <span class="glyphicon glyphicon-arrow-right"></span>
glyphicon glyphicon-arrow-up <span class="glyphicon glyphicon-arrow-up"></span>
glyphicon glyphicon-arrow-down <span class="glyphicon glyphicon-arrow-down"></span>
glyphicon glyphicon-share-alt <span class="glyphicon glyphicon-share-alt"></span>
glyphicon glyphicon-resize-full <span class="glyphicon glyphicon-resize-full"></span>
glyphicon glyphicon-resize-small <span class="glyphicon glyphicon-resize-small"></span>
glyphicon glyphicon-exclamation-sign <span class="glyphicon glyphicon-exclamation-sign"></span>
glyphicon glyphicon-gift <span class="glyphicon glyphicon-gift"></span>
glyphicon glyphicon-leaf <span class="glyphicon glyphicon-leaf"></span>
glyphicon glyphicon-fire <span class="glyphicon glyphicon-fire"></span>
glyphicon glyphicon-eye-open <span class="glyphicon glyphicon-eye-open"></span>
glyphicon glyphicon-eye-close <span class="glyphicon glyphicon-eye-close"></span>
glyphicon glyphicon-warning-sign <span class="glyphicon glyphicon-warning-sign"></span>
glyphicon glyphicon-plane <span class="glyphicon glyphicon-plane"></span>
glyphicon glyphicon-calendar <span class="glyphicon glyphicon-calendar"></span>
glyphicon glyphicon-random <span class="glyphicon glyphicon-random"></span>
glyphicon glyphicon-comment <span class="glyphicon glyphicon-comment"></span>
glyphicon glyphicon-magnet <span class="glyphicon glyphicon-magnet"></span>
glyphicon glyphicon-chevron-up <span class="glyphicon glyphicon-chevron-up"></span>
glyphicon glyphicon-chevron-down <span class="glyphicon glyphicon-chevron-down"></span>
glyphicon glyphicon-retweet <span class="glyphicon glyphicon-retweet"></span>
glyphicon glyphicon-shopping-cart <span class="glyphicon glyphicon-shopping-cart"></span>
glyphicon glyphicon-folder-close <span class="glyphicon glyphicon-folder-close"></span>
glyphicon glyphicon-folder-open <span class="glyphicon glyphicon-folder-open"></span>
glyphicon glyphicon-resize-vertical <span class="glyphicon glyphicon-resize-vertical"></span>
glyphicon glyphicon-resize-horizontal <span class="glyphicon glyphicon-resize-horizontal"></span>
glyphicon glyphicon-hdd <span class="glyphicon glyphicon-hdd"></span>
glyphicon glyphicon-bullhorn <span class="glyphicon glyphicon-bullhorn"></span>
glyphicon glyphicon-bell <span class="glyphicon glyphicon-bell"></span>
glyphicon glyphicon-certificate <span class="glyphicon glyphicon-certificate"></span>
glyphicon glyphicon-thumbs-up <span class="glyphicon glyphicon-thumbs-up"></span>
glyphicon glyphicon-thumbs-down <span class="glyphicon glyphicon-thumbs-down"></span>
glyphicon glyphicon-hand-right <span class="glyphicon glyphicon-hand-right"></span>
glyphicon glyphicon-hand-left <span class="glyphicon glyphicon-hand-left"></span>
glyphicon glyphicon-hand-up <span class="glyphicon glyphicon-hand-up"></span>
glyphicon glyphicon-hand-down <span class="glyphicon glyphicon-hand-down"></span>
glyphicon glyphicon-circle-arrow-right <span class="glyphicon glyphicon-circle-arrow-right"></span>
glyphicon glyphicon-circle-arrow-left <span class="glyphicon glyphicon-circle-arrow-left"></span>
glyphicon glyphicon-circle-arrow-up <span class="glyphicon glyphicon-circle-arrow-up"></span>
glyphicon glyphicon-circle-arrow-down <span class="glyphicon glyphicon-circle-arrow-down"></span>
glyphicon glyphicon-globe <span class="glyphicon glyphicon-globe"></span>
glyphicon glyphicon-wrench <span class="glyphicon glyphicon-wrench"></span>
glyphicon glyphicon-tasks <span class="glyphicon glyphicon-tasks"></span>
glyphicon glyphicon-filter <span class="glyphicon glyphicon-filter"></span>
glyphicon glyphicon-briefcase <span class="glyphicon glyphicon-briefcase"></span>
glyphicon glyphicon-fullscreen <span class="glyphicon glyphicon-fullscreen"></span>
glyphicon glyphicon-dashboard <span class="glyphicon glyphicon-dashboard"></span>
glyphicon glyphicon-paperclip <span class="glyphicon glyphicon-paperclip"></span>
glyphicon glyphicon-heart-empty <span class="glyphicon glyphicon-heart-empty"></span>
glyphicon glyphicon-link <span class="glyphicon glyphicon-link"></span>
glyphicon glyphicon-phone <span class="glyphicon glyphicon-phone"></span>
glyphicon glyphicon-pushpin <span class="glyphicon glyphicon-pushpin"></span>
glyphicon glyphicon-usd <span class="glyphicon glyphicon-usd"></span>
glyphicon glyphicon-gbp <span class="glyphicon glyphicon-gbp"></span>
glyphicon glyphicon-sort <span class="glyphicon glyphicon-sort"></span>
glyphicon glyphicon-sort-by-alphabet <span class="glyphicon glyphicon-sort-by-alphabet"></span>
glyphicon glyphicon-sort-by-alphabet-alt <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
glyphicon glyphicon-sort-by-order <span class="glyphicon glyphicon-sort-by-order"></span>
glyphicon glyphicon-sort-by-order-alt <span class="glyphicon glyphicon-sort-by-order-alt"></span>
glyphicon glyphicon-sort-by-attributes <span class="glyphicon glyphicon-sort-by-attributes"></span>
glyphicon glyphicon-sort-by-attributes-alt <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
glyphicon glyphicon-unchecked <span class="glyphicon glyphicon-unchecked"></span>
glyphicon glyphicon-expand <span class="glyphicon glyphicon-expand"></span>
glyphicon glyphicon-collapse-down <span class="glyphicon glyphicon-collapse-down"></span>
glyphicon glyphicon-collapse-up <span class="glyphicon glyphicon-collapse-up"></span>
glyphicon glyphicon-log-in <span class="glyphicon glyphicon-log-in"></span>
glyphicon glyphicon-flash <span class="glyphicon glyphicon-flash"></span>
glyphicon glyphicon-log-out <span class="glyphicon glyphicon-log-out"></span>
glyphicon glyphicon-new-window <span class="glyphicon glyphicon-new-window"></span>
glyphicon glyphicon-record <span class="glyphicon glyphicon-record"></span>
glyphicon glyphicon-save <span class="glyphicon glyphicon-save"></span>
glyphicon glyphicon-open <span class="glyphicon glyphicon-open"></span>
glyphicon glyphicon-saved <span class="glyphicon glyphicon-saved"></span>
glyphicon glyphicon-import <span class="glyphicon glyphicon-import"></span>
glyphicon glyphicon-export <span class="glyphicon glyphicon-export"></span>
glyphicon glyphicon-send <span class="glyphicon glyphicon-send"></span>
glyphicon glyphicon-floppy-disk <span class="glyphicon glyphicon-floppy-disk"></span>
glyphicon glyphicon-floppy-saved <span class="glyphicon glyphicon-floppy-saved"></span>
glyphicon glyphicon-floppy-remove <span class="glyphicon glyphicon-floppy-remove"></span>
glyphicon glyphicon-floppy-save <span class="glyphicon glyphicon-floppy-save"></span>
glyphicon glyphicon-floppy-open <span class="glyphicon glyphicon-floppy-open"></span>
glyphicon glyphicon-credit-card <span class="glyphicon glyphicon-credit-card"></span>
glyphicon glyphicon-transfer <span class="glyphicon glyphicon-transfer"></span>
glyphicon glyphicon-cutlery <span class="glyphicon glyphicon-cutlery"></span>
glyphicon glyphicon-header <span class="glyphicon glyphicon-header"></span>
glyphicon glyphicon-compressed <span class="glyphicon glyphicon-compressed"></span>
glyphicon glyphicon-earphone <span class="glyphicon glyphicon-earphone"></span>
glyphicon glyphicon-phone-alt <span class="glyphicon glyphicon-phone-alt"></span>
glyphicon glyphicon-tower <span class="glyphicon glyphicon-tower"></span>
glyphicon glyphicon-stats <span class="glyphicon glyphicon-stats"></span>
glyphicon glyphicon-sd-video <span class="glyphicon glyphicon-sd-video"></span>
glyphicon glyphicon-hd-video <span class="glyphicon glyphicon-hd-video"></span>
glyphicon glyphicon-subtitles <span class="glyphicon glyphicon-subtitles"></span>
glyphicon glyphicon-sound-stereo <span class="glyphicon glyphicon-sound-stereo"></span>
glyphicon glyphicon-sound-dolby <span class="glyphicon glyphicon-sound-dolby"></span>
glyphicon glyphicon-sound-5-1 <span class="glyphicon glyphicon-sound-5-1"></span>
glyphicon glyphicon-sound-6-1 <span class="glyphicon glyphicon-sound-6-1"></span>
glyphicon glyphicon-sound-7-1 <span class="glyphicon glyphicon-sound-7-1"></span>
glyphicon glyphicon-copyright-mark <span class="glyphicon glyphicon-copyright-mark"></span>
glyphicon glyphicon-registration-mark <span class="glyphicon glyphicon-registration-mark"></span>
glyphicon glyphicon-cloud-download <span class="glyphicon glyphicon-cloud-download"></span>
glyphicon glyphicon-cloud-upload <span class="glyphicon glyphicon-cloud-upload"></span>
glyphicon glyphicon-tree-conifer <span class="glyphicon glyphicon-tree-conifer"></span>
glyphicon glyphicon-tree-deciduous <span class="glyphicon glyphicon-tree-deciduous"></span>
glyphicon glyphicon-cd <span class="glyphicon glyphicon-cd"></span>
glyphicon glyphicon-save-file <span class="glyphicon glyphicon-save-file"></span>
glyphicon glyphicon-open-file <span class="glyphicon glyphicon-open-file"></span>
glyphicon glyphicon-level-up <span class="glyphicon glyphicon-level-up"></span>
glyphicon glyphicon-copy <span class="glyphicon glyphicon-copy"></span>
glyphicon glyphicon-paste <span class="glyphicon glyphicon-paste"></span>
glyphicon glyphicon-alert <span class="glyphicon glyphicon-alert"></span>
glyphicon glyphicon-equalizer <span class="glyphicon glyphicon-equalizer"></span>
glyphicon glyphicon-king <span class="glyphicon glyphicon-king"></span>
glyphicon glyphicon-queen <span class="glyphicon glyphicon-queen"></span>
glyphicon glyphicon-pawn <span class="glyphicon glyphicon-pawn"></span>
glyphicon glyphicon-bishop <span class="glyphicon glyphicon-bishop"></span>
glyphicon glyphicon-knight <span class="glyphicon glyphicon-knight"></span>
glyphicon glyphicon-baby-formula <span class="glyphicon glyphicon-baby-formula"></span>
glyphicon glyphicon-tent <span class="glyphicon glyphicon-tent"></span>
glyphicon glyphicon-blackboard <span class="glyphicon glyphicon-blackboard"></span>
glyphicon glyphicon-bed <span class="glyphicon glyphicon-bed"></span>
glyphicon glyphicon-apple <span class="glyphicon glyphicon-apple"></span>
glyphicon glyphicon-erase <span class="glyphicon glyphicon-erase"></span>
glyphicon glyphicon-hourglass <span class="glyphicon glyphicon-hourglass"></span>
glyphicon glyphicon-lamp <span class="glyphicon glyphicon-lamp"></span>
glyphicon glyphicon-duplicate <span class="glyphicon glyphicon-duplicate"></span>
glyphicon glyphicon-piggy-bank <span class="glyphicon glyphicon-piggy-bank"></span>
glyphicon glyphicon-scissors <span class="glyphicon glyphicon-scissors"></span>
glyphicon glyphicon-bitcoin <span class="glyphicon glyphicon-bitcoin"></span>
glyphicon glyphicon-yen <span class="glyphicon glyphicon-yen"></span>
glyphicon glyphicon-ruble <span class="glyphicon glyphicon-ruble"></span>
glyphicon glyphicon-scale <span class="glyphicon glyphicon-scale"></span>
glyphicon glyphicon-ice-lolly <span class="glyphicon glyphicon-ice-lolly"></span>
glyphicon glyphicon-ice-lolly-tasted <span class="glyphicon glyphicon-ice-lolly-tasted"></span>
glyphicon glyphicon-education <span class="glyphicon glyphicon-education"></span>
glyphicon glyphicon-option-horizontal <span class="glyphicon glyphicon-option-horizontal"></span>
glyphicon glyphicon-option-vertical <span class="glyphicon glyphicon-option-vertical"></span>
glyphicon glyphicon-menu-hamburger <span class="glyphicon glyphicon-menu-hamburger"></span>
glyphicon glyphicon-modal-window <span class="glyphicon glyphicon-modal-window"></span>
glyphicon glyphicon-oil <span class="glyphicon glyphicon-oil"></span>
glyphicon glyphicon-grain <span class="glyphicon glyphicon-grain"></span>
glyphicon glyphicon-sunglasses <span class="glyphicon glyphicon-sunglasses"></span>
glyphicon glyphicon-text-size <span class="glyphicon glyphicon-text-size"></span>
glyphicon glyphicon-text-color <span class="glyphicon glyphicon-text-color"></span>
glyphicon glyphicon-text-background <span class="glyphicon glyphicon-text-background"></span>
glyphicon glyphicon-object-align-top <span class="glyphicon glyphicon-object-align-top"></span>
glyphicon glyphicon-object-align-bottom <span class="glyphicon glyphicon-object-align-bottom"></span>
glyphicon glyphicon-object-align-horizontal <span class="glyphicon glyphicon-object-align-horizontal"></span>
glyphicon glyphicon-object-align-left <span class="glyphicon glyphicon-object-align-left"></span>
glyphicon glyphicon-object-align-vertical <span class="glyphicon glyphicon-object-align-vertical"></span>
glyphicon glyphicon-object-align-right <span class="glyphicon glyphicon-object-align-right"></span>
glyphicon glyphicon-triangle-right <span class="glyphicon glyphicon-triangle-right"></span>
glyphicon glyphicon-triangle-left <span class="glyphicon glyphicon-triangle-left"></span>
glyphicon glyphicon-triangle-bottom <span class="glyphicon glyphicon-triangle-bottom"></span>
glyphicon glyphicon-triangle-top <span class="glyphicon glyphicon-triangle-top"></span>
glyphicon glyphicon-console <span class="glyphicon glyphicon-console"></span>
glyphicon glyphicon-superscript <span class="glyphicon glyphicon-superscript"></span>
glyphicon glyphicon-subscript <span class="glyphicon glyphicon-subscript"></span>
glyphicon glyphicon-menu-left <span class="glyphicon glyphicon-menu-left"></span>
glyphicon glyphicon-menu-right <span class="glyphicon glyphicon-menu-right"></span>
glyphicon glyphicon-menu-down <span class="glyphicon glyphicon-menu-down"></span>
glyphicon glyphicon-menu-up <span class="glyphicon glyphicon-menu-up"></span>