1. Home
  2. Features - Icons

Features - Icons

This page is taken from ASSETS documentation and is presented as an example for the correct use of font icons.

This template supports 2 icon sets:

All icons by those providers are available, for complete list go via the links provided down the page.

Remember this is an accessible template:
If the Font Glyph conveys meaning (for example if it is used as a status icon or a linked icon), then the meaning must be provided in text using the sr-only class / use the AdobeBlank font (invisible on seeing computers) so that it is available for assistive technologies. The following example shows the telephone icon with a text alternative that is visually hidden, but available for assistive technologies.

Source code sr-only class example 

<span aria-hidden="true">
    <em class="glyphicon glyphicon-phone-alt"></em>
</span>
<span class="sr-only">Telephone</span> 202 444-8888

This would create the following icon with hidden text that is announced correctly by assistive technologies.

telephone icon 202 444-8888

To achieve the same result using Font Awesome, simply replace the class="glyphicon glyphicon-phone-alt" attribute with class="fa fa-phone".

Icons Example

Font Awesome Icons

  • fa fa-envelope
  • fa fa-suitcase
  • fa fa-medkit
  • fa fa-calendar
  • fa fa-circle-o
  • fa fa-angle-down
  • fa fa-sort-alpha-asc
  • fa fa-angle-left
  • fa fa-angle-right
  • fa fa-angle-up
  • fa fa-check
  • fa fa-angle-double-left
  • fa fa-angle-double-right
  • fa fa-angle-double-up
  • fa fa-angle-double-down
  • fa fa-circle

For more icons and usage, please see Font Awesome icons pageThis link opens a new window or tab. To use different sizes and with other components, please see the Font Awesome examples pageThis link opens a new window or tab.

Glyphicons

  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-print
  • glyphicon glyphicon-music
  • glyphicon glyphicon-home
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-road
  • glyphicon glyphicon-search
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-file
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-star
  • glyphicon glyphicon-link
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-off
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-warning_sign
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-random
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-font
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-check
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-step_backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-move
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-share
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up

For examples on how to use with the <a> or <button> element and changing the size of the icon‚ please see the Bootstrap Font Glyphs example pageThis link opens a new window or tab.