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 communication team's blog post.
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.
If you would like to use an icon that is not on the approved list (below) please contact the digital communications team.
<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-official fa-2x" title="Facebook"></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">Twitter</span>
<i class="fa fa-twitter-square fa-2x" title="Twitter"></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>
To use as a class name, prefix the icon name with fa-, for example fa-address-book.
<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-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-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-calendar fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-check-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-check-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-minus-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-minus-o
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-o
</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-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-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-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-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-commenting fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>commenting
</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-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-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-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-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-exclamation-triangle fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exclamation-triangle
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-external-link fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>external-link
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>facebook-official
</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-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 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-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-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-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-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-o fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>keyboard-o
</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-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-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-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-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-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-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-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-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-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-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-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-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 fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>share
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-in fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-in
</div>
</div>
<div class="col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-out fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-out
</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-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-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-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-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-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-camera fa-2x" aria-hidden="true"></i>
<span class="sr-only">Example of </span>video-camera
</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-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-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>
