<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>
<style>
body {
font-style: normal;
text-rendering: auto;
}
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
padding: 1px;
max-width: 200px;
height: auto;
margin-top: 10px;
font-weight: normal;
}
ul {
list-style: none;
line-height: 1.8em;
}
li {
cursor: text;
padding-right: 10px;
}
li:hover {
color: #fff;
background: #4B5B6C !important;
}
li:nth-child(even) {
background: #C9CED3;
}
li:first-child {
background: #fff !important;
color: #000 !important;
cursor: default;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
i {
position: relative;
margin-right: 8px;
margin-left: 8px;
}
</style>
</head>
<body translate="no">
<div class="flex-container">
<ul class="flex-item">
<li>General Use</li>
<li><i class="fa fa-angle-double-left"></i>fa-angle-double-left</li>
<li><i class="fa fa-angle-double-right"></i>fa-angle-double-right</li>
<li><i class="fa fa-angle-double-down"></i>fa-angle-double-down</li>
<li><i class="fa fa-angle-double-up"></i>fa-angle-double-up</li>
<li><i class="fa fa-chevron-circle-left"></i>fa-chevron-circle-left</li>
<li><i class="fa fa-chevron-circle-right"></i>fa-chevron-circle-right</li>
<li><i class="fa fa-chevron-circle-down"></i>fa-chevron-circle-down</li>
<li><i class="fa fa-chevron-circle-up"></i>fa-chevron-circle-up</li>
<li><i class="fa fa-hand-o-right"></i>fa-hand-o-right</li>
<li><i class="fa fa-thumbs-up"></i>fa-thumbs-up</li>
<li><i class="fa fa-thumbs-o-up"></i>fa-thumbs-o-up</li>
<li><i class="fa fa-heart"></i>fa-heart</li>
<li><i class="fa fa-heart-o"></i>fa-heart-o</li>
<li><i class="fa fa-check"></i>fa-check</li>
<li><i class="fa fa-check-square"></i>fa-check-square</li>
<li><i class="fa fa-check-square-o"></i>fa-check-square-o</li>
<li><i class="fa fa-check-circle"></i>fa-check-circle</li>
<li><i class="fa fa-check-circle-o"></i>fa-check-circle-o</li>
</ul>
<ul class="flex-item">
<li>Events</li>
<li><i class="fa fa-info"></i>fa-info</li>
<li><i class="fa fa-info-circle"></i>fa-info-circle</li>
<li><i class="fa fa-question"></i>fa-question</li>
<li><i class="fa fa-question-circle"></i>fa-question-circle</li>
<li><i class="fa fa-binoculars"></i>fa-binoculars</li>
<li><i class="fa fa-ticket"></i>fa-ticket</li>
<li><i class="fa fa-compass"></i>fa-compass</li>
<li><i class="fa fa-cab"></i>fa-cab</li>
<li><i class="fa fa-automobile"></i>fa-automobile</li>
<li><i class="fa fa-car"></i>fa-car</li>
<li><i class="fa fa-bicycle"></i>fa-bicycle</li>
<li><i class="fa fa-building"></i>fa-building</li>
<li><i class="fa fa-building-o"></i>fa-building-o</li>
<li><i class="fa fa-home"></i>fa-home</li>
<li><i class="fa fa-hotel"></i>fa-hotel</li>
<li><i class="fa fa-bed"></i>fa-bed</li>
<li><i class="fa fa-map-marker"></i>fa-map-marker</li>
<li><i class="fa fa-location-arrow"></i>fa-location-arrow</li>
</ul>
<ul class="flex-item">
<li>Communication</li>
<li><i class="fa fa-mail-forward"></i>fa-mail-forward</li>
<li><i class="fa fa-share"></i>fa-share</li>
<li><i class="fa fa-share-square"></i>fa-share-square</li>
<li><i class="fa fa-share-square-o"></i>fa-share-square-o</li>
<li><i class="fa fa-share-alt"></i>fa-share-alt</li>
<li><i class="fa fa-share-alt-square"></i>fa-share-alt-square</li>
<li><i class="fa fa-comment"></i>fa-comment</li>
<li><i class="fa fa-comment-o"></i>fa-comment-o</li>
<li><i class="fa fa-comments"></i>fa-comments</li>
<li><i class="fa fa-comments-o"></i>fa-comments-o</li>
<li><i class="fa fa-envelope"></i>fa-envelope</li>
<li><i class="fa fa-envelope-o"></i>fa-envelope-o</li>
<li><i class="fa fa-envelope-square"></i>fa-envelope-square</li>
<li><i class="fa fa-inbox"></i>fa-inbox</li>
<li><i class="fa fa-send"></i>fa-send</li>
<li><i class="fa fa-send-o"></i>fa-send-o</li>
<li><i class="fa fa-download"></i>fa-download</li>
<li><i class="fa fa-upload"></i>fa-upload</li></ul>
<ul class="flex-item">
<li>Comm. Continued</li>
<li><i class="fa fa-phone"></i>fa-phone</li>
<li><i class="fa fa-phone-square"></i>fa-phone-square</li>
<li><i class="fa fa-calendar"></i>fa-calendar</li>
<li><i class="fa fa-calendar-o"></i>fa-calendar-o</li>
<li><i class="fa fa-gift"></i>fa-gift</li>
<li><i class="fa fa-graduation-cap"></i>fa-graduation-cap</li>
<li><i class="fa fa-camera"></i>fa-camera</li>
<li><i class="fa fa-umbrella"></i>fa-umbrella</li>
<li><i class="fa fa-star"></i>fa-star</li>
<li><i class="fa fa-star-o"></i>fa-star-o</li>
<li><i class="fa fa-facebook"></i>fa-facebook</li>
<li><i class="fa fa-facebook-square"></i>fa-facebook-square</li>
<li><i class="fa fa-twitter"></i>fa-twitter</li>
<li><i class="fa fa-twitter-square"></i>fa-twitter-square</li>
<li><i class="fa fa-youtube"></i>fa-youtube</li>
<li><i class="fa fa-youtube-square"></i>fa-youtube-square</li>
<li><i class="fa fa-instagram"></i>fa-instagram</li>
<li><i class="fa fa-skype"></i>fa-skype</li>
</ul>
<ul class="flex-item">
<li>Other</li>
<li><i class="fa fa-smile-o"></i>fa-smile-o</li>
<li><i class="fa fa-meh-o"></i>fa-meh-o</li>
<li><i class="fa fa-frown-o"></i>fa-frown-o</li>
<li><i class="fa fa-cog"></i>fa-cog</li>
<li><i class="fa fa-gear"></i>fa-gear</li>
<li><i class="fa fa-cogs"></i>fa-cogs</li>
<li><i class="fa fa-gears"></i>fa-gears</li>
<li><i class="fa fa-gavel"></i>fa-gavel</li>
<li><i class="fa fa-bell"></i>fa-bell</li>
<li><i class="fa fa-bell-o"></i>fa-bell-o</li>
<li><i class="fa fa-exclamation"></i>fa-exclamation</li>
<li><i class="fa fa-exclamation-circle"></i>fa-exclamation-circle</li>
<li><i class="fa fa-exclamation-triangle"></i>fa-exclamation-triangle</li>
<li><i class="fa fa-warning"></i>fa-warning</li>
<li><i class="fa fa-close"></i>fa-close</li>
<li><i class="fa fa-times"></i>fa-times</li>
<li><i class="fa fa-times-circle"></i>fa-times-circle</li>
<li><i class="fa fa-times-circle-o"></i>fa-times-circle-o</li>
</div>
</body>
</html>