Font Awesome
Font Awesome provides scalable vector icons used to accent elements on webpages and web applications. See below for examples and the list of approved icons. For more information on the thought process behind the application of icons, please refer to the Digital Communications team's blog post.
Rules for Font Awesome
- Must only use the approved icons below.
- May use icons to accent existing elements.
- Basic page functionality may use standalone icons.
- Complex page interactions must use text.
- Complex page interactions may use icons to accompany text.
You may use any of the approved icons with <i class="fa fa-icon-name" title="icon title">. Change the icon title to match the functionality of the link. See the Font Awesome website for more ways to configure the icons.
Requesting more icons
If you would like to use an icon that is not on the approved list (below) please contact the Digital Communications team.
Options available
Sample usage
Here are some example icons.
Code
Example
<div class="container">
<div class="row">
<div class="col-md-4 fa-examples">
<h4>Social media icons</h4>
<div class="btn-group">
<a class="" href="#"><span class="sr-only">Facebook</span>
<i class="fa fa-facebook-square fa-2x" title="Facebook"></i>
</a>
<a class="" href="#"><span class="sr-only">Twitter</span>
<i class="fa fa-twitter-square fa-2x" title="Twitter"></i>
</a>
<a class="" href="#"><span class="sr-only">Instagram</span>
<i class="fa fa-instagram fa-2x" title="Instagram"></i>
</a>
<a class="" href="#"><span class="sr-only">Snapchat</span>
<i class="fa fa-snapchat-square fa-2x" title="Snapchat"></i>
</a>
<a class="" href="#"><span class="sr-only">YouTube</span>
<i class="fa fa-youtube-square fa-2x" title="YouTube"></i>
</a>
</div>
</div>
<div class="col-md-4 fa-examples">
<h4>File icons</h4>
<p><a href="#">University prospectus <i class="fa fa-file-pdf-o" title="PDF"></i></a></p>
<p><a href="#">University email signature <i class="fa fa-file-word-o" title="Word"></i></a></p>
<p><a href="#">University PowerPoint <i class="fa fa-file-powerpoint-o" title="PowerPoint"></i></a></p>
</div>
<div class="col-md-4 fa-examples">
<h4>Web applications</h4>
<div class="list-group-item list-group-child">
<a href="#">View records (staff)</a>
<a href="#" target="_blank" title="Open in new tab"><i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
<div class="list-group-item list-group-child">
<a href="#">Create records (staff)</a>
<a href="#" target="_blank" title="Open in new tab"><i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>Approved icons
To use as a class name, prefix the icon name with fa-, for example fa-address-book.
Example of address-book
Example of address-card
Example of adjust
Example of archive
Example of area-chart
Example of arrows
Example of arrows-h
Example of arrows-v
Example of assistive-listening-systems
Example of atom
Example of audio-description
Example of award
Example of balance-scale
Example of ban
Example of bar-chart
Example of bar-chart-o
Example of bars
Example of bell
Example of bell-slash
Example of bicycle
Example of book
Example of bookmark
Example of bookmark-o
Example of book-open
Example of braille
Example of building
Example of calendar-alt
Example of calendar-plus-o
Example of calendar-times-o
Example of car
Example of check
Example of check-circle
Example of check-circle-o
Example of check-square
Example of check-square-o
Example of chevron-down
Example of chevron-left
Example of chevron-right
Example of chevron-up
Example of circle
Example of circle-o
Example of clipboard-list
Example of clock
Example of clock-o
Example of clone
Example of close
Example of closed-captioning
Example of cloud
Example of cloud-download
Example of cloud-upload
Example of code
Example of coffee
Example of cog
Example of cogs
Example of comment
Example of comment-dots
Example of comments
Example of copy
Example of dashboard
Example of database
Example of deaf
Example of desktop
Example of dna
Example of dot-circle-o
Example of download
Example of edit
Example of ellipsis-h
Example of ellipsis-v
Example of envelope
Example of envelope-open
Example of envelope-square
Example of exchange
Example of exclamation-circle
Example of expand
Example of external-link-alt
Example of facebook-square
Example of feed
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o
Example of file-pdf-o
Example of file-photo-o
Example of file-picture-o
Example of file-powerpoint-o
Example of file-sound-o
Example of file-video-o
Example of file-word-o
Example of file-zip-o
Example of film
Example of filter
Example of flag
Example of flag-checkered
Example of flask
Example of folder
Example of folder-open
Example of gear
Example of globe-africa
Example of globe-americas
Example of globe-asia
Example of globe-europe
Example of graduation-cap
Example of group
Example of hashtag
Example of hdd
Example of headphones
Example of heart
Example of heartbeat
Example of history
Example of home
Example of id-card
Example of image
Example of images
Example of inbox
Example of info
Example of info-circle
Example of instagram
Example of key
Example of keyboard
Example of language
Example of laptop
Example of laptop-code
Example of level-down
Example of level-up
Example of linkedin-square
Example of location-arrow
Example of lock
Example of low-vision
Example of mail-bulk
Example of mail-forward
Example of mail-reply
Example of mail-reply-all
Example of map
Example of map-marker
Example of map-pin
Example of microphone
Example of microphone-slash
Example of microscope
Example of minus
Example of mobile-alt
Example of music
Example of navicon
Example of parking
Example of pencil
Example of phone-square
Example of photo
Example of pie-chart
Example of plus
Example of podcast
Example of poll
Example of power-off
Example of print
Example of project-diagram
Example of qrcode
Example of question
Example of question-circle
Example of quote-left
Example of quote-right
Example of recycle
Example of refresh
Example of remove
Example of reorder
Example of reply
Example of reply-all
Example of retweet
Example of rss
Example of rss-square
Example of save
Example of school
Example of search
Example of search-minus
Example of search-plus
Example of send
Example of server
Example of share-alt
Example of sign-in-alt
Example of sign-language
Example of sign-out-alt
Example of sitemap
Example of sliders
Example of snapchat-square
Example of sort
Example of sort-alpha-asc
Example of sort-alpha-desc
Example of sort-amount-asc
Example of sort-amount-desc
Example of sort-asc
Example of sort-desc
Example of sort-down
Example of sort-numeric-asc
Example of sort-numeric-desc
Example of sort-up
Example of spinner
Example of square-full
Example of square-o
Example of stethoscope
Example of sticky-note
Example of street-view
Example of support
Example of sync-alt
Example of tag
Example of tags
Example of tasks
Example of thumbs-down
Example of thumbs-up
Example of ticket
Example of times
Example of toggle-down
Example of toggle-left
Example of toggle-off
Example of toggle-on
Example of toggle-right
Example of toggle-up
Example of trash
Example of trophy
Example of twitter-square
Example of universal-access
Example of university
Example of unlock
Example of upload
Example of user
Example of user-circle
Example of user-graduate
Example of user-plus
Example of user-times
Example of users
Example of video
Example of video-slash
Example of volume-down
Example of volume-off
Example of volume-up
Example of vote-yea
Example of warning
Example of whatsapp
Example of wheelchair
Example of wifi
Example of window-close
Example of window-maximize
Example of window-minimize
Example of window-restore
Example of wordpress
Example of youtube-square
Code
Example
<div class="container fa_icons_example">
<div class="row">
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-address-book fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>address-book
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-address-card fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>address-card
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-adjust fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>adjust
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-archive fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>archive
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-area-chart fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>area-chart
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows-h fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows-h
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows-v fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows-v
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-assistive-listening-systems fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>assistive-listening-systems
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-atom fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>atom
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-audio-description fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>audio-description
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-award fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>award
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-balance-scale fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>balance-scale
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-ban fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ban
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bar-chart fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bar-chart
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bar-chart-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bar-chart-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bars
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bell fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bell
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bell-slash fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bell-slash
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bicycle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bicycle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-book fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>book
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bookmark fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bookmark
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bookmark-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bookmark-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-book-open fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>book-open
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-braille fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>braille
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-building fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>building
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-plus-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-plus-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-times-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-times-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-car fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>car
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-check fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-circle-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-square-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>chevron-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>chevron-left
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>chevron-right
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>chevron-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-circle-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>circle-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-clipboard-list fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clipboard-list
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-clock fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clock
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-clock-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clock-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-clone fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clone
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-close fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>close
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-closed-captioning fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>closed-captioning
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud-download fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud-download
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud-upload
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-code fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>code
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-coffee fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>coffee
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-cog fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cog
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cogs
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-comment fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>comment
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-comment-dots fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>comment-dots
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-comments fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>comments
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-copy fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>copy
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-dashboard fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dashboard
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-database fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>database
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-deaf fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>deaf
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-desktop fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>desktop
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-dna fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dna
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-dot-circle-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dot-circle-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-download fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>download
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-edit fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>edit
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-ellipsis-h fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ellipsis-h
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ellipsis-v
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>envelope
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-envelope-open fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>envelope-open
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-envelope-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>envelope-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-exchange fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exchange
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exclamation-circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-expand fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>expand
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-external-link-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>external-link-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>facebook-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-feed fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>feed
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-archive-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-archive-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-audio-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-audio-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-code-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-code-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-excel-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-excel-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-image-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-image-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-movie-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-movie-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-pdf-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-pdf-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-photo-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-photo-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-picture-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-picture-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-powerpoint-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-powerpoint-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-sound-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-sound-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-video-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-video-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-word-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-word-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-zip-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-zip-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-film fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>film
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-filter fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>filter
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-flag fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flag
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-flag-checkered fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flag-checkered
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-flask fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flask
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-folder fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>folder
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>folder-open
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-gear fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>gear
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe-africa fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe-africa
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe-americas fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe-americas
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe-asia fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe-asia
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe-europe fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe-europe
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>graduation-cap
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-group fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>group
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-hashtag fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>hashtag
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-hdd fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>hdd
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-headphones fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>headphones
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-heart fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>heart
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-heartbeat fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>heartbeat
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-history fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>history
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>home
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-id-card fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>id-card
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-image fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>image
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-images fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>images
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-inbox fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>inbox
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-info fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>info
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-info-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>info-circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>instagram
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-key fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>key
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-keyboard fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>keyboard
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-language fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>language
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-laptop fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>laptop
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-laptop-code fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>laptop-code
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-level-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>level-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-level-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>level-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>linkedin-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-location-arrow fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>location-arrow
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-lock fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>lock
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-low-vision fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>low-vision
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-bulk fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-bulk
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-forward fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-forward
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-reply fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-reply
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-reply-all fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-reply-all
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-map fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map-marker
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-map-pin fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map-pin
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>microphone
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-microphone-slash fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>microphone-slash
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-microscope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>microscope
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-minus fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>minus
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-mobile-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mobile-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-music fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>music
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-navicon fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>navicon
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-parking fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>parking
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>pencil
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-phone-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>phone-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-photo fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>photo
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-pie-chart fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>pie-chart
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>plus
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-podcast fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>podcast
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-poll fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>poll
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-power-off fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>power-off
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-print fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>print
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-project-diagram fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>project-diagram
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-qrcode fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>qrcode
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-question fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>question
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-question-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>question-circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-quote-left fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>quote-left
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-quote-right fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>quote-right
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-recycle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>recycle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>refresh
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-remove fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>remove
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-reorder fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reorder
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-reply fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reply
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-reply-all fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reply-all
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-retweet fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>retweet
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-rss fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>rss
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-rss-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>rss-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-save fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>save
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-school fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>school
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-search-minus fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search-minus
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-search-plus fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search-plus
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>send
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-server fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>server
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-share-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>share-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-in-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-in-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-language fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-language
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-out-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sitemap fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sitemap
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sliders fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sliders
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-snapchat-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>snapchat-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-alpha-asc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-alpha-asc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-alpha-desc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-alpha-desc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-amount-asc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-amount-asc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-amount-desc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-amount-desc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-asc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-asc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-desc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-desc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-numeric-asc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-numeric-asc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-numeric-desc fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-numeric-desc
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-spinner fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>spinner
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-square-full fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>square-full
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-square-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>square-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>stethoscope
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sticky-note
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-street-view fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>street-view
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-support fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>support
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sync-alt fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sync-alt
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-tag fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tag
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-tags fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tags
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-tasks fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tasks
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-thumbs-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>thumbs-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>thumbs-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-ticket fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ticket
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-times fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>times
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-left fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-left
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-off fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-off
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-on fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-on
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-right fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-right
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-trash fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>trash
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-trophy fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>trophy
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>twitter-square
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-universal-access fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>universal-access
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-university fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>university
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>unlock
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>upload
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-circle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-circle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-graduate fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-graduate
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-plus fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-plus
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-times fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-times
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-users fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>users
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-video fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>video
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-video-slash fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>video-slash
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-down fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-down
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-off fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-off
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-up fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-up
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-vote-yea fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>vote-yea
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-warning fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>warning
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>whatsapp
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-wheelchair fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>wheelchair
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-wifi fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>wifi
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-close fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-close
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-maximize fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-maximize
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-minimize fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-minimize
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-restore fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-restore
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-wordpress fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>wordpress
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>youtube-square
</div>
</div>
</div>
</div>Approved icons for use with showcase banner pattern
These are the approved options that can be used within the showcase banner pattern.
To use as a class name, prefix the icon name with fa-, for example fa-address-book.
Example of atom
Example of award
Example of balance-scale
Example of bicycle
Example of dna
Example of flask
Example of globe
Example of graduation-cap
Example of pie-chart
Example of school
Example of trophy
Example of university
Example of universal-access
Example of user-graduate
Code
<div class="container fa_icons_example">
<div class="row">
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-atom fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>atom
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-award fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>award
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-balance-scale fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>balance-scale
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-bicycle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bicycle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-dna fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dna
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-flask fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flask
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>graduation-cap
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-pie-chart fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>pie-chart
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-school fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>school
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-trophy fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>trophy
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-university fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>university
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-universal-access fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>universal-access
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-graduate fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-graduate
</div>
</div>
</div>
</div>