Home » icons add in bootstrap 3 buttons. » Add icons in bootstrap 3 button very simple steps

Wednesday, 3 December 2014 icons add in bootstrap 3 buttons.

Add icons in bootstrap 3 button very simple steps

How To Add Icon In Bootstrap 3 Buttons.

In previous tutorial easy to learn how to create interactive buttons in bootstrap 3 now we learn how to add icons in bootstrap 3 button. Let's start now.

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-adjust"></span>IRtutor.blogspot.com</a>

Show Preview

IRtutor.blogspot.com

Icons add in bootstrap 3

If you want to show icon on right side it's very simple to move span on right side you will see icon shows on right side.

<a href="#" class="btn btn-default">IRtutor.blogspot.com<span class="glyphicon glyphicon-adjust"></span></a>

Show Preview

IRtutor.blogspot.com

If you want to change icon as you like you will change icons one by one use these span and clases.

<span class="glyphicon glyphicon-adjust"></span>
<span class="glyphicon glyphicon-align-center"></span>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="glyphicon glyphicon-align-left"></span>
<span class="glyphicon glyphicon-align-right"></span>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-backward"></span>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="glyphicon glyphicon-barcode"></span>
<span class="glyphicon glyphicon-bell"></span>
<span class="glyphicon glyphicon-bold"></span>
<span class="glyphicon glyphicon-bold"></span>
<span class="glyphicon glyphicon-bookmark"></span>
<span class="glyphicon glyphicon-briefcase"></span>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-camera"></span>
<span class="glyphicon glyphicon-certificate"></span>
<span class="glyphicon glyphicon-check"></span>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="glyphicon glyphicon-cloud glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="glyphicon glyphicon-cloud-upload"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-collapse-down"></span>
<span class="glyphicon glyphicon-collapse-up"></span>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon glyphicon-compressed"></span>
<span class="glyphicon glyphicon-copyright-mark"></span>
<span class="glyphicon glyphicon-credit-card"></span>
<span class="glyphicon glyphicon-cutlery"></span>
<span class="glyphicon glyphicon-dashboard"></span>
<span class="glyphicon glyphicon-download glyphicon glyphicon-download"></span>
<span class="glyphicon glyphicon-download-alt"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-eject"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="glyphicon glyphicon-expand"></span>
<span class="glyphicon glyphicon-export"></span>
<span class="glyphicon glyphicon-eye-close"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-film"></span>
<span class="glyphicon glyphicon-filter"></span>
<span class="glyphicon glyphicon-fire"></span>
<span class="glyphicon glyphicon-flag"></span>
<span class="glyphicon glyphicon-flash"></span>
<span class="glyphicon glyphicon-floppy-disk"></span>
<span class="glyphicon glyphicon-floppy-open"></span>
<span class="glyphicon glyphicon-floppy-remove"></span>
<span class="glyphicon glyphicon-floppy-save glyphicon glyphicon-floppy-save"></span>
<span class="glyphicon glyphicon-floppy-saved"></span>
<span class="glyphicon glyphicon-folder-close"></span>
<span class="glyphicon glyphicon-folder-open"></span>
<span class="glyphicon glyphicon-font"></span>
<span class="glyphicon glyphicon-forward"></span>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="glyphicon glyphicon-gbp"></span>
<span class="glyphicon glyphicon-gift"></span>
<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="glyphicon glyphicon-hd-video"></span>
<span class="glyphicon glyphicon-hdd"></span>
<span class="glyphicon glyphicon-header"></span>
<span class="glyphicon glyphicon-headphones"></span>
<span class="glyphicon glyphicon-heart glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-heart-empty"></span>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-import"></span>
<span class="glyphicon glyphicon-inbox"></span>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-italic"></span>
<span class="glyphicon glyphicon-leaf"></span>
<span class="glyphicon glyphicon-link"></span>
<span class="glyphicon glyphicon-list glyphicon glyphicon-list"></span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="v"></span>
<span class="glyphicon glyphicon-log-in"></span>
<span class="glyphicon glyphicon-log-out"></span>
<span class="glyphicon glyphicon-magnet"></span>
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon glyphicon-minus glyphicon glyphicon-minus"></span>
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon glyphicon-move"></span>
<span class="glyphicon glyphicon-move"></span>
<span class="glyphicon glyphicon-new-window"></span>
<span class="glyphicon glyphicon-off"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-ok-circle"></span>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-paperclip"></span>
<span class="glyphicon glyphicon-pause"></span>
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-phone"></span>
<span class="glyphicon glyphicon-phone-alt"></span>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon glyphicon-plane"></span>
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-pushpin"></span>
<span class="glyphicon glyphicon-qrcode"></span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon glyphicon-random"></span>
<span class="glyphicon glyphicon-record"></span>
<span class="glyphicon glyphicon-refresh"></span>
<span class="glyphicon glyphicon-registration-mark"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="glyphicon glyphicon-remove-sign"</span>
<span class="glyphicon glyphicon-repeat"></span>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="glyphicon glyphicon-retweet"></span>
<span class="glyphicon glyphicon-road"></span>
<span class="glyphicon glyphicon-save"></span>
<span class="glyphicon glyphicon-saved"></span>
<span class="glyphicon glyphicon-screenshot"></span>
<span class="glyphicon glyphicon-sd-video"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-send"></span>
<span class="glyphicon glyphicon-share"></span>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-sort"></span>
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-sort-by-order"></span>
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
<span class="glyphicon glyphicon-sound-5-1"></span>
<span class="glyphicon glyphicon-sound-6-1"></span>
<span class="glyphicon glyphicon-sound-7-1"></span>
<span class="glyphicon glyphicon-sound-dolby"></span>
<span class="glyphicon glyphicon-sound-stereo"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-stats"></span>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="glyphicon glyphicon-stop"></span>
<span class="glyphicon glyphicon-subtitles"></span>
<span class="glyphicon glyphicon-tag"></span>
<span class="glyphicon glyphicon-tags"></span>
<span class="glyphicon glyphicon-tasks"></span>
<span class="glyphicon glyphicon-text-height"></span>
<span class="glyphicon glyphicon-text-width"></span>
<span class="glyphicon glyphicon-th"></span>
<span class="glyphicon glyphicon-th-large"></span>
<span class="glyphicon glyphicon-th-list"></span>
<span class="glyphicon glyphicon-thumbs-down"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-time"></span>
<span class="glyphicon glyphicon-tint"></span>
<span class="glyphicon glyphicon-tower"></span>
<span class="glyphicon glyphicon-transfer"></span>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-tree-conifer"></span>
<span class="glyphicon glyphicon-tree-deciduous"></span>
<span class="glyphicon glyphicon-unchecked"></span>
<span class="glyphicon glyphicon-upload"></span>
<span class="glyphicon glyphicon-usd"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-up"></span>
<span class="glyphicon glyphicon-warning-sign"></span>
<span class="glyphicon glyphicon-wrench"></span>
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="glyphicon glyphicon-zoom-out"></span>

Posted by Unknown