Twitter Bootstrap Icons

In this tutorial you will learn how to use Twitter Bootstrap icons.

Icons by Glyphicons

Twitter Bootstrap includes 200 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.

Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.

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

Tip:Twitter Bootstrap icons are provided by Glyphicons. However you are free to use these icons in your project but as a courtesy you can consider to include a link back to Glyphicons whenever practical.


How to Use Icons in Your Code

To use the Bootstrap icons you will require an <span> tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:

<span class="glyphicon glyphicon-class-name"></span>

Where "glyphicon-class-name" is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css.

For example, to use search icon you can place the following code just about anywhere:

  • <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
  • <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>

— The output of the above example will look something like this:

Check out the next chapter to see how to use these icons in Bootstrap nav components.

 

Note:Remember to leave a space after the closing tag of icon element
(i.e. after </span> tag) when using icons along with the strings of text such as inside buttons or navigation links, to ensure proper spacing.

 
Close

Your Feedback:

 

We will be happy if you say something.