Font Awesome provides scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Use Font Awesome 4.x icons to accent elements on webpages and web applications. See below for examples and the list of approved icons.
You may use any of the approved icons with <i class="fa fa-icon-name" title="icon title">. See the Font Awesome website for more ways to configure the icons.
In order to use Font Awesome you will need to include a link to the CDN:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">If you would like to use an icon that is not on the approved list (below) please contact the digital communications team.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 fa-examples">
<p>Social media icons</p>
<div class="btn-group">
<a class="" href="#">
<i class="fa fa-facebook-official fa-2x" title="Facebook"></i>
</a>
<a class="" href="#">
<i class="fa fa-instagram fa-2x" title="Instagram"></i>
</a>
<a class="" href="#">
<i class="fa fa-snapchat-square fa-2x" title="Snapchat"></i>
</a>
<a class="" href="#">
<i class="fa fa-twitter-square fa-2x" title="Twitter"></i>
</a>
<a class="" href="#">
<i class="fa fa-youtube-square fa-2x" title="YouTube"></i>
</a>
</div>
</div>
<div class="col-md-4 fa-examples">
<p>File icons</p>
<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">
<p>Web applications</p>
<div class="list-group-item list-group-child" style="display: block;">
<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" style="display: block;">
<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-, e.g. fa-address-book.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container fa_icons_example">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-address-book" aria-hidden="true"></i>
<span class="sr-only">Example of </span>address-book
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-address-card" aria-hidden="true"></i>
<span class="sr-only">Example of </span>address-card
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-adjust" aria-hidden="true"></i>
<span class="sr-only">Example of </span>adjust
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<span class="sr-only">Example of </span>archive
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-area-chart" aria-hidden="true"></i>
<span class="sr-only">Example of </span>area-chart
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows-h" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows-h
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-arrows-v" aria-hidden="true"></i>
<span class="sr-only">Example of </span>arrows-v
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-ban" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ban
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bar-chart
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-bar-chart-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bar-chart-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bars
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-bookmark" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bookmark
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-bookmark-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>bookmark-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-check-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-minus-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-minus-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-plus-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-calendar-times-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>calendar-times-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-check" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-circle" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-circle
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-circle-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-square" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-square
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>check-square-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clock-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-clone" aria-hidden="true"></i>
<span class="sr-only">Example of </span>clone
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-close" aria-hidden="true"></i>
<span class="sr-only">Example of </span>close
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud-download" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud-download
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-cloud-upload" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cloud-upload
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-code" aria-hidden="true"></i>
<span class="sr-only">Example of </span>code
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cog
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span class="sr-only">Example of </span>cogs
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-comment" aria-hidden="true"></i>
<span class="sr-only">Example of </span>comment
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-commenting" aria-hidden="true"></i>
<span class="sr-only">Example of </span>commenting
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-comments" aria-hidden="true"></i>
<span class="sr-only">Example of </span>comments
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-dashboard" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dashboard
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span class="sr-only">Example of </span>desktop
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>dot-circle-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-download" aria-hidden="true"></i>
<span class="sr-only">Example of </span>download
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-edit" aria-hidden="true"></i>
<span class="sr-only">Example of </span>edit
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ellipsis-h
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ellipsis-v
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="sr-only">Example of </span>envelope
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<span class="sr-only">Example of </span>envelope-open
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-exchange" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exchange
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exclamation-circle
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="sr-only">Example of </span>exclamation-triangle
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-external-link" aria-hidden="true"></i>
<span class="sr-only">Example of </span>external-link
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<span class="sr-only">Example of </span>facebook-official
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-feed" aria-hidden="true"></i>
<span class="sr-only">Example of </span>feed
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-archive-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-archive-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-audio-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-audio-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-code-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-code-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-excel-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-image-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-image-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-movie-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-movie-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-pdf-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-photo-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-photo-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-picture-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-picture-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-powerpoint-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-sound-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-sound-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-video-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-word-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-word-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-file-zip-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>file-zip-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-film" aria-hidden="true"></i>
<span class="sr-only">Example of </span>film
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-filter" aria-hidden="true"></i>
<span class="sr-only">Example of </span>filter
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-flag" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flag
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-flag-checkered" aria-hidden="true"></i>
<span class="sr-only">Example of </span>flag-checkered
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-folder" aria-hidden="true"></i>
<span class="sr-only">Example of </span>folder
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-folder-open" aria-hidden="true"></i>
<span class="sr-only">Example of </span>folder-open
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-gear" aria-hidden="true"></i>
<span class="sr-only">Example of </span>gear
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-globe" aria-hidden="true"></i>
<span class="sr-only">Example of </span>globe
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<span class="sr-only">Example of </span>graduation-cap
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-group" aria-hidden="true"></i>
<span class="sr-only">Example of </span>group
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-hashtag" aria-hidden="true"></i>
<span class="sr-only">Example of </span>hashtag
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-heart" aria-hidden="true"></i>
<span class="sr-only">Example of </span>heart
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-history" aria-hidden="true"></i>
<span class="sr-only">Example of </span>history
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-home" aria-hidden="true"></i>
<span class="sr-only">Example of </span>home
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-id-card" aria-hidden="true"></i>
<span class="sr-only">Example of </span>id-card
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-image" aria-hidden="true"></i>
<span class="sr-only">Example of </span>image
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-inbox" aria-hidden="true"></i>
<span class="sr-only">Example of </span>inbox
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-info" aria-hidden="true"></i>
<span class="sr-only">Example of </span>info
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span class="sr-only">Example of </span>info-circle
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Example of </span>instagram
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-key" aria-hidden="true"></i>
<span class="sr-only">Example of </span>key
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-keyboard-o" aria-hidden="true"></i>
<span class="sr-only">Example of </span>keyboard-o
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-language" aria-hidden="true"></i>
<span class="sr-only">Example of </span>language
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-laptop" aria-hidden="true"></i>
<span class="sr-only">Example of </span>laptop
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-level-down" aria-hidden="true"></i>
<span class="sr-only">Example of </span>level-down
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-level-up" aria-hidden="true"></i>
<span class="sr-only">Example of </span>level-up
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
<span class="sr-only">Example of </span>location-arrow
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="sr-only">Example of </span>lock
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-forward" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-forward
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-reply" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-reply
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-mail-reply-all" aria-hidden="true"></i>
<span class="sr-only">Example of </span>mail-reply-all
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-map" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map-marker
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-map-pin" aria-hidden="true"></i>
<span class="sr-only">Example of </span>map-pin
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-minus" aria-hidden="true"></i>
<span class="sr-only">Example of </span>minus
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-navicon" aria-hidden="true"></i>
<span class="sr-only">Example of </span>navicon
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span class="sr-only">Example of </span>pencil
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-photo" aria-hidden="true"></i>
<span class="sr-only">Example of </span>photo
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-pie-chart" aria-hidden="true"></i>
<span class="sr-only">Example of </span>pie-chart
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-plus" aria-hidden="true"></i>
<span class="sr-only">Example of </span>plus
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-podcast" aria-hidden="true"></i>
<span class="sr-only">Example of </span>podcast
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span class="sr-only">Example of </span>power-off
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-print" aria-hidden="true"></i>
<span class="sr-only">Example of </span>print
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-qrcode" aria-hidden="true"></i>
<span class="sr-only">Example of </span>qrcode
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-question" aria-hidden="true"></i>
<span class="sr-only">Example of </span>question
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-quote-left" aria-hidden="true"></i>
<span class="sr-only">Example of </span>quote-left
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-quote-right" aria-hidden="true"></i>
<span class="sr-only">Example of </span>quote-right
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span class="sr-only">Example of </span>refresh
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-remove" aria-hidden="true"></i>
<span class="sr-only">Example of </span>remove
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-reorder" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reorder
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-reply" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reply
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-reply-all" aria-hidden="true"></i>
<span class="sr-only">Example of </span>reply-all
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-retweet" aria-hidden="true"></i>
<span class="sr-only">Example of </span>retweet
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-rss" aria-hidden="true"></i>
<span class="sr-only">Example of </span>rss
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-search-minus" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search-minus
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-search-plus" aria-hidden="true"></i>
<span class="sr-only">Example of </span>search-plus
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-send" aria-hidden="true"></i>
<span class="sr-only">Example of </span>send
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-server" aria-hidden="true"></i>
<span class="sr-only">Example of </span>server
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-share" aria-hidden="true"></i>
<span class="sr-only">Example of </span>share
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-in" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-in
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sign-out" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sign-out
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sitemap" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sitemap
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sliders" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sliders
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-snapchat-square" aria-hidden="true"></i>
<span class="sr-only">Example of </span>snapchat-square
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-alpha-asc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-alpha-asc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-alpha-desc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-alpha-desc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-amount-asc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-amount-desc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-asc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-asc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-desc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-desc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-down" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-down
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-numeric-asc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-numeric-asc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-numeric-desc" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-numeric-desc
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sort-up" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sort-up
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-spinner" aria-hidden="true"></i>
<span class="sr-only">Example of </span>spinner
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-sticky-note" aria-hidden="true"></i>
<span class="sr-only">Example of </span>sticky-note
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-street-view" aria-hidden="true"></i>
<span class="sr-only">Example of </span>street-view
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-support" aria-hidden="true"></i>
<span class="sr-only">Example of </span>support
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tag
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-tags" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tags
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class="sr-only">Example of </span>tasks
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-thumbs-down" aria-hidden="true"></i>
<span class="sr-only">Example of </span>thumbs-down
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span class="sr-only">Example of </span>thumbs-up
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-ticket" aria-hidden="true"></i>
<span class="sr-only">Example of </span>ticket
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-times" aria-hidden="true"></i>
<span class="sr-only">Example of </span>times
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-down" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-down
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-left" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-left
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-off" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-off
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-on" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-on
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-right" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-right
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-toggle-up" aria-hidden="true"></i>
<span class="sr-only">Example of </span>toggle-up
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-trash" aria-hidden="true"></i>
<span class="sr-only">Example of </span>trash
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<span class="sr-only">Example of </span>twitter-square
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-unlock" aria-hidden="true"></i>
<span class="sr-only">Example of </span>unlock
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-upload" aria-hidden="true"></i>
<span class="sr-only">Example of </span>upload
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-plus" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-plus
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-user-times" aria-hidden="true"></i>
<span class="sr-only">Example of </span>user-times
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-users" aria-hidden="true"></i>
<span class="sr-only">Example of </span>users
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-video-camera" aria-hidden="true"></i>
<span class="sr-only">Example of </span>video-camera
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-down" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-down
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-off" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-off
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-volume-up" aria-hidden="true"></i>
<span class="sr-only">Example of </span>volume-up
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-warning" aria-hidden="true"></i>
<span class="sr-only">Example of </span>warning
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-wifi" aria-hidden="true"></i>
<span class="sr-only">Example of </span>wifi
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-close" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-close
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-maximize" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-maximize
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-minimize" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-minimize
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-window-restore" aria-hidden="true"></i>
<span class="sr-only">Example of </span>window-restore
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-wordpress" aria-hidden="true"></i>
<span class="sr-only">Example of </span>wordpress
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="fa_icon">
<i class="fa fa-youtube-square" aria-hidden="true"></i>
<span class="sr-only">Example of </span>youtube-square
</div>
</div>
</div>
</div>
