Cara Menggunaan Icon Bootstrap


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>



Related Artikel Cara Menggunaan Icon Bootstrap

2 comments:

  1. selain code span bisa apa tidak mas..?

    ReplyDelete
    Replies
    1. Bisa saja gan, tinggal tambahkan nama classnya.
      contoh kalau di header jadinya
      <h1 class='glyphicon glyphicon-picture'></h1>

      Delete