Skip to content

Instantly share code, notes, and snippets.

@leandromarques

leandromarques/fontawesome-picker-example.html

Created July 29, 2016 18:09
Show Gist options
  • Save leandromarques/8ba9401f4b3925a7ae816a8a3ac35b2b to your computer and use it in GitHub Desktop.
Save leandromarques/8ba9401f4b3925a7ae816a8a3ac35b2b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fontawesome-picker-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font-also</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
<style media="screen">
ul {
width: 300px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
ul li {
list-style: none;
position: relative;
margin-bottom: 5px;
display: list-item;
font-size: 30px;
cursor: pointer;
}
ul li i {
padding: 5px;
}
ul li i:hover {
border: 1px solid red;
}
ul li span {
display: none;
}
.imed-icon {
font-size: 150px;
}
.imed-icon i {
cursor: pointer;
}
#font-awesome-list {
display: none;
position: relative;
height: 300px;
overflow-y: scroll;
}
.imed-icons {
width: 600px;
}
.imed-icons .imed-icon {
display: inline-block;
margin-left: 10px;
}
</style>
<script type="text/javascript">
$(function(){
$(".font-group > li > i").on("click", function(){
var icon_name = $(this).attr("data-icon");
var icon_tag = '<i class="'+icon_name+'"></i>';
$("#imed-icon").html(icon_tag);
$.each($(".imed-icon"), function(index, value){
$(value).attr("id", "");
$(value).css("border", "0px");
});
$("#font-awesome-list").hide();
});
$(".imed-icon").on("click", function(){
$("#font-awesome-list").show();
$.each($(".imed-icon"), function(index, value){
$(value).attr("id", "");
$(value).css("border", "0px");
});
$(this).attr("id", "imed-icon");
$(this).css("border", "1px dotted red");
});
});
</script>
</head>
<body>
<div class="imed-icons">
<div class="imed-icon">
<i class="fa fa-glass"></i>
</div>
<div class="imed-icon">
<i class="fa fa-music"></i>
</div>
<div class="imed-icon">
<i class="fa fa-search"></i>
</div>
</div>
<br><br>
<div id="font-awesome-list">
<ul class="font-group">
<li><i class="fa fa-glass" data-icon="fa fa-glass"></i></li>
<li><i class="fa fa-music" data-icon="fa fa-music"></i></li>
<li><i class="fa fa-search" data-icon="fa fa-search"></i> </li>
<li><i class="fa fa-envelope-o" data-icon="fa fa-envelope-o"></i></li>
<li><i class="fa fa-heart" data-icon="fa fa-heart"></i> </li>
<li><i class="fa fa-star" data-icon="fa fa-star"></i></li>
<li><i class="fa fa-star-o" data-icon="fa fa-star-o"></i></li>
<li><i class="fa fa-user" data-icon="fa fa-user"></i></li>
<li><i class="fa fa-film" data-icon="fa fa-film"></i></li>
<li><i class="fa fa-th-large" data-icon="fa fa-th-large"></i> <sp< li="">
</sp<></li><li><i class="fa fa-th" data-icon="fa fa-th"></i> </li>
<li><i class="fa fa-th-list" data-icon="fa fa-th-list"></i> </li>
<li><i class="fa fa-check" data-icon="fa fa-check"></i> </li>
<li><i class="fa fa-times" data-icon="fa fa-times"></i> </li>
<li><i class="fa fa-search-plus" data-icon="fa fa-search-plus"></i> </li>
<li><i class="fa fa-search-minus" data-icon="fa fa-search-minus"></i> </li>
<li><i class="fa fa-power-off" data-icon="fa fa-power-off"></i> </li>
<li><i class="fa fa-signal" data-icon="fa fa-signal"></i> </li>
<li><i class="fa fa-cog" data-icon="fa fa-cog"></i> </li>
<li><i class="fa fa-trash-o" data-icon="fa fa-trash-o"></i> </li>
<li><i class="fa fa-home" data-icon="fa fa-home"></i> </li>
<li><i class="fa fa-file-o" data-icon="fa fa-file-o"></i> </li>
<li><i class="fa fa-clock-o" data-icon="fa fa-clock-o"></i> </li>
<li><i class="fa fa-road" data-icon="fa fa-road"></i> </li>
<li><i class="fa fa-download" data-icon="fa fa-download"></i> </li>
<li><i class="fa fa-arrow-circle-o-down" data-icon="fa fa-arrow-circle-o-down"></i> </li>
<li><i class="fa fa-arrow-circle-o-up" data-icon="fa fa-arrow-circle-o-up"></i> </li>
<li><i class="fa fa-inbox" data-icon="fa fa-inbox"></i> </li>
<li><i class="fa fa-play-circle-o" data-icon="fa fa-play-circle-o"></i> </li>
<li><i class="fa fa-repeat" data-icon="fa fa-repeat"></i> </li>
<li><i class="fa fa-refresh" data-icon="fa fa-refresh"></i> </li>
<li><i class="fa fa-list-alt" data-icon="fa fa-list-alt"></i> </li>
<li><i class="fa fa-lock" data-icon="fa fa-lock"></i> </li>
<li><i class="fa fa-flag" data-icon="fa fa-flag"></i> </li>
<li><i class="fa fa-headphones" data-icon="fa fa-headphones"></i> </li>
<li><i class="fa fa-volume-off" data-icon="fa fa-volume-off"></i> </li>
<li><i class="fa fa-volume-down" data-icon="fa fa-volume-down"></i> </li>
<li><i class="fa fa-volume-up" data-icon="fa fa-volume-up"></i> </li>
<li><i class="fa fa-qrcode" data-icon="fa fa-qrcode"></i> </li>
<li><i class="fa fa-barcode" data-icon="fa fa-barcode"></i> </li>
<li><i class="fa fa-tag" data-icon="fa fa-tag"></i> </li>
<li><i class="fa fa-tags" data-icon="fa fa-tags"></i> </li>
<li><i class="fa fa-book" data-icon="fa fa-book"></i> </li>
<li><i class="fa fa-bookmark" data-icon="fa fa-bookmark"></i> </li>
<li><i class="fa fa-print" data-icon="fa fa-print"></i> </li>
<li><i class="fa fa-camera" data-icon="fa fa-camera"></i> </li>
<li><i class="fa fa-font" data-icon="fa fa-font"></i> </li>
<li><i class="fa fa-bold" data-icon="fa fa-bold"></i> </li>
<li><i class="fa fa-italic" data-icon="fa fa-italic"></i> </li>
<li><i class="fa fa-text-height" data-icon="fa fa-text-height"></i> </li>
<li><i class="fa fa-text-width" data-icon="fa fa-text-width"></i> </li>
<li><i class="fa fa-align-left" data-icon="fa fa-align-left"></i> </li>
<li><i class="fa fa-align-center" data-icon="fa fa-align-center"></i> </li>
<li><i class="fa fa-align-right" data-icon="fa fa-align-right"></i> </li>
<li><i class="fa fa-align-justify" data-icon="fa fa-align-justify"></i> </li>
<li><i class="fa fa-list" data-icon="fa fa-list"></i> </li>
<li><i class="fa fa-outdent" data-icon="fa fa-outdent"></i> </li>
<li><i class="fa fa-indent" data-icon="fa fa-indent"></i> </li>
<li><i class="fa fa-video-camera" data-icon="fa fa-video-camera"></i> </li>
<li><i class="fa fa-picture-o" data-icon="fa fa-picture-o"></i> </li>
<li><i class="fa fa-pencil" data-icon="fa fa-pencil"></i> </li>
<li><i class="fa fa-map-marker" data-icon="fa fa-map-marker"></i> </li>
<li><i class="fa fa-adjust" data-icon="fa fa-adjust"></i> </li>
<li><i class="fa fa-tint" data-icon="fa fa-tint"></i> </li>
<li><i class="fa fa-pencil-square-o" data-icon="fa fa-pencil-square-o"></i> </li>
<li><i class="fa fa-share-square-o" data-icon="fa fa-share-square-o"></i> </li>
<li><i class="fa fa-check-square-o" data-icon="fa fa-check-square-o"></i> </li>
<li><i class="fa fa-arrows" data-icon="fa fa-arrows"></i> </li>
<li><i class="fa fa-step-backward" data-icon="fa fa-step-backward"></i> </li>
<li><i class="fa fa-fast-backward" data-icon="fa fa-fast-backward"></i> </li>
<li><i class="fa fa-backward" data-icon="fa fa-backward"></i> </li>
<li><i class="fa fa-play" data-icon="fa fa-play"></i> </li>
<li><i class="fa fa-pause" data-icon="fa fa-pause"></i> </li>
<li><i class="fa fa-stop" data-icon="fa fa-stop"></i> </li>
<li><i class="fa fa-forward" data-icon="fa fa-forward"></i> </li>
<li><i class="fa fa-fast-forward" data-icon="fa fa-fast-forward"></i> </li>
<li><i class="fa fa-step-forward" data-icon="fa fa-step-forward"></i> </li>
<li><i class="fa fa-eject" data-icon="fa fa-eject"></i> </li>
<li><i class="fa fa-chevron-left" data-icon="fa fa-chevron-left"></i> </li>
<li><i class="fa fa-chevron-right" data-icon="fa fa-chevron-right"></i> </li>
<li><i class="fa fa-plus-circle" data-icon="fa fa-plus-circle"></i> </li>
<li><i class="fa fa-minus-circle" data-icon="fa fa-minus-circle"></i> </li>
<li><i class="fa fa-times-circle" data-icon="fa fa-times-circle"></i> </li>
<li><i class="fa fa-check-circle" data-icon="fa fa-check-circle"></i> </li>
<li><i class="fa fa-question-circle" data-icon="fa fa-question-circle"></i> </li>
<li><i class="fa fa-info-circle" data-icon="fa fa-info-circle"></i> </li>
<li><i class="fa fa-crosshairs" data-icon="fa fa-crosshairs"></i> </li>
<li><i class="fa fa-times-circle-o" data-icon="fa fa-times-circle-o"></i> </li>
<li><i class="fa fa-check-circle-o" data-icon="fa fa-check-circle-o"></i> </li>
<li><i class="fa fa-ban" data-icon="fa fa-ban"></i> </li>
<li><i class="fa fa-arrow-left" data-icon="fa fa-arrow-left"></i> </li>
<li><i class="fa fa-arrow-right" data-icon="fa fa-arrow-right"></i> </li>
<li><i class="fa fa-arrow-up" data-icon="fa fa-arrow-up"></i> </li>
<li><i class="fa fa-arrow-down" data-icon="fa fa-arrow-down"></i> </li>
<li><i class="fa fa-share" data-icon="fa fa-share"></i> </li>
<li><i class="fa fa-expand" data-icon="fa fa-expand"></i> </li>
<li><i class="fa fa-compress" data-icon="fa fa-compress"></i> </li>
<li><i class="fa fa-plus" data-icon="fa fa-plus"></i> </li>
<li><i class="fa fa-minus" data-icon="fa fa-minus"></i> </li>
<li><i class="fa fa-asterisk" data-icon="fa fa-asterisk"></i> </li>
<li><i class="fa fa-exclamation-circle" data-icon="fa fa-exclamation-circle"></i> </li>
<li><i class="fa fa-gift" data-icon="fa fa-gift"></i> </li>
<li><i class="fa fa-leaf" data-icon="fa fa-leaf"></i> </li>
<li><i class="fa fa-fire" data-icon="fa fa-fire"></i> </li>
<li><i class="fa fa-eye" data-icon="fa fa-eye"></i> </li>
<li><i class="fa fa-eye-slash" data-icon="fa fa-eye-slash"></i> </li>
<li><i class="fa fa-exclamation-triangle" data-icon="fa fa-exclamation-triangle"></i> </li>
<li><i class="fa fa-plane" data-icon="fa fa-plane"></i> </li>
<li><i class="fa fa-calendar" data-icon="fa fa-calendar"></i> </li>
<li><i class="fa fa-random" data-icon="fa fa-random"></i> </li>
<li><i class="fa fa-comment" data-icon="fa fa-comment"></i> </li>
<li><i class="fa fa-magnet" data-icon="fa fa-magnet"></i> </li>
<li><i class="fa fa-chevron-up" data-icon="fa fa-chevron-up"></i> </li>
<li><i class="fa fa-chevron-down" data-icon="fa fa-chevron-down"></i> </li>
<li><i class="fa fa-retweet" data-icon="fa fa-retweet"></i> </li>
<li><i class="fa fa-shopping-cart" data-icon="fa fa-shopping-cart"></i> </li>
<li><i class="fa fa-folder" data-icon="fa fa-folder"></i> </li>
<li><i class="fa fa-folder-open" data-icon="fa fa-folder-open"></i> </li>
<li><i class="fa fa-arrows-v" data-icon="fa fa-arrows-v"></i> </li>
<li><i class="fa fa-arrows-h" data-icon="fa fa-arrows-h"></i> </li>
<li><i class="fa fa-bar-chart" data-icon="fa fa-bar-chart"></i> </li>
<li><i class="fa fa-twitter-square" data-icon="fa fa-twitter-square"></i> </li>
<li><i class="fa fa-facebook-square" data-icon="fa fa-facebook-square"></i> </li>
<li><i class="fa fa-camera-retro" data-icon="fa fa-camera-retro"></i> </li>
<li><i class="fa fa-key" data-icon="fa fa-key"></i> </li>
<li><i class="fa fa-cogs" data-icon="fa fa-cogs"></i> </li>
<li><i class="fa fa-comments" data-icon="fa fa-comments"></i> </li>
<li><i class="fa fa-thumbs-o-up" data-icon="fa fa-thumbs-o-up"></i> </li>
<li><i class="fa fa-thumbs-o-down" data-icon="fa fa-thumbs-o-down"></i> </li>
<li><i class="fa fa-star-half" data-icon="fa fa-star-half"></i> </li>
<li><i class="fa fa-heart-o" data-icon="fa fa-heart-o"></i> </li>
<li><i class="fa fa-sign-out" data-icon="fa fa-sign-out"></i> </li>
<li><i class="fa fa-linkedin-square" data-icon="fa fa-linkedin-square"></i> </li>
<li><i class="fa fa-thumb-tack" data-icon="fa fa-thumb-tack"></i> </li>
<li><i class="fa fa-external-link" data-icon="fa fa-external-link"></i> </li>
<li><i class="fa fa-sign-in" data-icon="fa fa-sign-in"></i> </li>
<li><i class="fa fa-trophy" data-icon="fa fa-trophy"></i> </li>
<li><i class="fa fa-github-square" data-icon="fa fa-github-square"></i> </li>
<li><i class="fa fa-upload" data-icon="fa fa-upload"></i> </li>
<li><i class="fa fa-lemon-o" data-icon="fa fa-lemon-o"></i> </li>
<li><i class="fa fa-phone" data-icon="fa fa-phone"></i> </li>
<li><i class="fa fa-square-o" data-icon="fa fa-square-o"></i> </li>
<li><i class="fa fa-bookmark-o" data-icon="fa fa-bookmark-o"></i> </li>
<li><i class="fa fa-phone-square" data-icon="fa fa-phone-square"></i> </li>
<li><i class="fa fa-twitter" data-icon="fa fa-twitter"></i> </li>
<li><i class="fa fa-facebook" data-icon="fa fa-facebook"></i> </li>
<li><i class="fa fa-github" data-icon="fa fa-github"></i> </li>
<li><i class="fa fa-unlock" data-icon="fa fa-unlock"></i> </li>
<li><i class="fa fa-credit-card" data-icon="fa fa-credit-card"></i> </li>
<li><i class="fa fa-rss" data-icon="fa fa-rss"></i> </li>
<li><i class="fa fa-hdd-o" data-icon="fa fa-hdd-o"></i> </li>
<li><i class="fa fa-bullhorn" data-icon="fa fa-bullhorn"></i> </li>
<li><i class="fa fa-bell" data-icon="fa fa-bell"></i> </li>
<li><i class="fa fa-certificate" data-icon="fa fa-certificate"></i> </li>
<li><i class="fa fa-hand-o-right" data-icon="fa fa-hand-o-right"></i> </li>
<li><i class="fa fa-hand-o-left" data-icon="fa fa-hand-o-left"></i> </li>
<li><i class="fa fa-hand-o-up" data-icon="fa fa-hand-o-up"></i> </li>
<li><i class="fa fa-hand-o-down" data-icon="fa fa-hand-o-down"></i> </li>
<li><i class="fa fa-arrow-circle-left" data-icon="fa fa-arrow-circle-left"></i> </li>
<li><i class="fa fa-arrow-circle-right" data-icon="fa fa-arrow-circle-right"></i> </li>
<li><i class="fa fa-arrow-circle-up" data-icon="fa fa-arrow-circle-up"></i> </li>
<li><i class="fa fa-arrow-circle-down" data-icon="fa fa-arrow-circle-down"></i> </li>
<li><i class="fa fa-globe" data-icon="fa fa-globe"></i> </li>
<li><i class="fa fa-wrench" data-icon="fa fa-wrench"></i> </li>
<li><i class="fa fa-tasks" data-icon="fa fa-tasks"></i> </li>
<li><i class="fa fa-filter" data-icon="fa fa-filter"></i> </li>
<li><i class="fa fa-briefcase" data-icon="fa fa-briefcase"></i> </li>
<li><i class="fa fa-arrows-alt" data-icon="fa fa-arrows-alt"></i> </li>
<li><i class="fa fa-users" data-icon="fa fa-users"></i> </li>
<li><i class="fa fa-link" data-icon="fa fa-link"></i> </li>
<li><i class="fa fa-cloud" data-icon="fa fa-cloud"></i> </li>
<li><i class="fa fa-flask" data-icon="fa fa-flask"></i> </li>
<li><i class="fa fa-scissors" data-icon="fa fa-scissors"></i> </li>
<li><i class="fa fa-files-o" data-icon="fa fa-files-o"></i> </li>
<li><i class="fa fa-paperclip" data-icon="fa fa-paperclip"></i> </li>
<li><i class="fa fa-floppy-o" data-icon="fa fa-floppy-o"></i> </li>
<li><i class="fa fa-square" data-icon="fa fa-square"></i> </li>
<li><i class="fa fa-bars" data-icon="fa fa-bars"></i> </li>
<li><i class="fa fa-list-ul" data-icon="fa fa-list-ul"></i> </li>
<li><i class="fa fa-list-ol" data-icon="fa fa-list-ol"></i> </li>
<li><i class="fa fa-strikethrough" data-icon="fa fa-strikethrough"></i> </li>
<li><i class="fa fa-underline" data-icon="fa fa-underline"></i> </li>
<li><i class="fa fa-table" data-icon="fa fa-table"></i> </li>
<li><i class="fa fa-magic" data-icon="fa fa-magic"></i> </li>
<li><i class="fa fa-truck" data-icon="fa fa-truck"></i> </li>
<li><i class="fa fa-pinterest" data-icon="fa fa-pinterest"></i> </li>
<li><i class="fa fa-pinterest-square" data-icon="fa fa-pinterest-square"></i> </li>
<li><i class="fa fa-google-plus-square" data-icon="fa fa-google-plus-square"></i> </li>
<li><i class="fa fa-google-plus" data-icon="fa fa-google-plus"></i> </li>
<li><i class="fa fa-money" data-icon="fa fa-money"></i> </li>
<li><i class="fa fa-caret-down" data-icon="fa fa-caret-down"></i> </li>
<li><i class="fa fa-caret-up" data-icon="fa fa-caret-up"></i> </li>
<li><i class="fa fa-caret-left" data-icon="fa fa-caret-left"></i> </li>
<li><i class="fa fa-caret-right" data-icon="fa fa-caret-right"></i> </li>
<li><i class="fa fa-columns" data-icon="fa fa-columns"></i> </li>
<li><i class="fa fa-sort" data-icon="fa fa-sort"></i> </li>
<li><i class="fa fa-sort-desc" data-icon="fa fa-sort-desc"></i> </li>
<li><i class="fa fa-sort-asc" data-icon="fa fa-sort-asc"></i> </li>
<li><i class="fa fa-envelope" data-icon="fa fa-envelope"></i> </li>
<li><i class="fa fa-linkedin" data-icon="fa fa-linkedin"></i> </li>
<li><i class="fa fa-undo" data-icon="fa fa-undo"></i> </li>
<li><i class="fa fa-gavel" data-icon="fa fa-gavel"></i> </li>
<li><i class="fa fa-tachometer" data-icon="fa fa-tachometer"></i> </li>
<li><i class="fa fa-comment-o" data-icon="fa fa-comment-o"></i> </li>
<li><i class="fa fa-comments-o" data-icon="fa fa-comments-o"></i> </li>
<li><i class="fa fa-bolt" data-icon="fa fa-bolt"></i> </li>
<li><i class="fa fa-sitemap" data-icon="fa fa-sitemap"></i> </li>
<li><i class="fa fa-umbrella" data-icon="fa fa-umbrella"></i> </li>
<li><i class="fa fa-clipboard" data-icon="fa fa-clipboard"></i> </li>
<li><i class="fa fa-lightbulb-o" data-icon="fa fa-lightbulb-o"></i> </li>
<li><i class="fa fa-exchange" data-icon="fa fa-exchange"></i> </li>
<li><i class="fa fa-cloud-download" data-icon="fa fa-cloud-download"></i> </li>
<li><i class="fa fa-cloud-upload" data-icon="fa fa-cloud-upload"></i> </li>
<li><i class="fa fa-user-md" data-icon="fa fa-user-md"></i> </li>
<li><i class="fa fa-stethoscope" data-icon="fa fa-stethoscope"></i> </li>
<li><i class="fa fa-suitcase" data-icon="fa fa-suitcase"></i> </li>
<li><i class="fa fa-bell-o" data-icon="fa fa-bell-o"></i> </li>
<li><i class="fa fa-coffee" data-icon="fa fa-coffee"></i> </li>
<li><i class="fa fa-cutlery" data-icon="fa fa-cutlery"></i> </li>
<li><i class="fa fa-file-text-o" data-icon="fa fa-file-text-o"></i> </li>
<li><i class="fa fa-building-o" data-icon="fa fa-building-o"></i> </li>
<li><i class="fa fa-hospital-o" data-icon="fa fa-hospital-o"></i> </li>
<li><i class="fa fa-ambulance" data-icon="fa fa-ambulance"></i> </li>
<li><i class="fa fa-medkit" data-icon="fa fa-medkit"></i> </li>
<li><i class="fa fa-fighter-jet" data-icon="fa fa-fighter-jet"></i> </li>
<li><i class="fa fa-beer" data-icon="fa fa-beer"></i> </li>
<li><i class="fa fa-h-square" data-icon="fa fa-h-square"></i> </li>
<li><i class="fa fa-plus-square" data-icon="fa fa-plus-square"></i> </li>
<li><i class="fa fa-angle-double-left" data-icon="fa fa-angle-double-left"></i> </li>
<li><i class="fa fa-angle-double-right" data-icon="fa fa-angle-double-right"></i> </li>
<li><i class="fa fa-angle-double-up" data-icon="fa fa-angle-double-up"></i> </li>
<li><i class="fa fa-angle-double-down" data-icon="fa fa-angle-double-down"></i> </li>
<li><i class="fa fa-angle-left" data-icon="fa fa-angle-left"></i> </li>
<li><i class="fa fa-angle-right" data-icon="fa fa-angle-right"></i> </li>
<li><i class="fa fa-angle-up" data-icon="fa fa-angle-up"></i> </li>
<li><i class="fa fa-angle-down" data-icon="fa fa-angle-down"></i> </li>
<li><i class="fa fa-desktop" data-icon="fa fa-desktop"></i> </li>
<li><i class="fa fa-laptop" data-icon="fa fa-laptop"></i> </li>
<li><i class="fa fa-tablet" data-icon="fa fa-tablet"></i> </li>
<li><i class="fa fa-mobile" data-icon="fa fa-mobile"></i> </li>
<li><i class="fa fa-circle-o" data-icon="fa fa-circle-o"></i> </li>
<li><i class="fa fa-quote-left" data-icon="fa fa-quote-left"></i> </li>
<li><i class="fa fa-quote-right" data-icon="fa fa-quote-right"></i> </li>
<li><i class="fa fa-spinner" data-icon="fa fa-spinner"></i> </li>
<li><i class="fa fa-circle" data-icon="fa fa-circle"></i> </li>
<li><i class="fa fa-reply" data-icon="fa fa-reply"></i> </li>
<li><i class="fa fa-github-alt" data-icon="fa fa-github-alt"></i> </li>
<li><i class="fa fa-folder-o" data-icon="fa fa-folder-o"></i> </li>
<li><i class="fa fa-folder-open-o" data-icon="fa fa-folder-open-o"></i> </li>
<li><i class="fa fa-smile-o" data-icon="fa fa-smile-o"></i> </li>
<li><i class="fa fa-frown-o" data-icon="fa fa-frown-o"></i> </li>
<li><i class="fa fa-meh-o" data-icon="fa fa-meh-o"></i> </li>
<li><i class="fa fa-gamepad" data-icon="fa fa-gamepad"></i> </li>
<li><i class="fa fa-keyboard-o" data-icon="fa fa-keyboard-o"></i> </li>
<li><i class="fa fa-flag-o" data-icon="fa fa-flag-o"></i> </li>
<li><i class="fa fa-flag-checkered" data-icon="fa fa-flag-checkered"></i> </li>
<li><i class="fa fa-terminal" data-icon="fa fa-terminal"></i> </li>
<li><i class="fa fa-code" data-icon="fa fa-code"></i> </li>
<li><i class="fa fa-reply-all" data-icon="fa fa-reply-all"></i> </li>
<li><i class="fa fa-star-half-o" data-icon="fa fa-star-half-o"></i> </li>
<li><i class="fa fa-location-arrow" data-icon="fa fa-location-arrow"></i> </li>
<li><i class="fa fa-crop" data-icon="fa fa-crop"></i> </li>
<li><i class="fa fa-code-fork" data-icon="fa fa-code-fork"></i> </li>
<li><i class="fa fa-chain-broken" data-icon="fa fa-chain-broken"></i> </li>
<li><i class="fa fa-question" data-icon="fa fa-question"></i> </li>
<li><i class="fa fa-info" data-icon="fa fa-info"></i> </li>
<li><i class="fa fa-exclamation" data-icon="fa fa-exclamation"></i> </li>
<li><i class="fa fa-superscript" data-icon="fa fa-superscript"></i> </li>
<li><i class="fa fa-subscript" data-icon="fa fa-subscript"></i> </li>
<li><i class="fa fa-eraser" data-icon="fa fa-eraser"></i> </li>
<li><i class="fa fa-puzzle-piece" data-icon="fa fa-puzzle-piece"></i> </li>
<li><i class="fa fa-microphone" data-icon="fa fa-microphone"></i> </li>
<li><i class="fa fa-microphone-slash" data-icon="fa fa-microphone-slash"></i> </li>
<li><i class="fa fa-shield" data-icon="fa fa-shield"></i> </li>
<li><i class="fa fa-calendar-o" data-icon="fa fa-calendar-o"></i> </li>
<li><i class="fa fa-fire-extinguisher" data-icon="fa fa-fire-extinguisher"></i> </li>
<li><i class="fa fa-rocket" data-icon="fa fa-rocket"></i> </li>
<li><i class="fa fa-maxcdn" data-icon="fa fa-maxcdn"></i> </li>
<li><i class="fa fa-chevron-circle-left" data-icon="fa fa-chevron-circle-left"></i> </li>
<li><i class="fa fa-chevron-circle-right" data-icon="fa fa-chevron-circle-right"></i> </li>
<li><i class="fa fa-chevron-circle-up" data-icon="fa fa-chevron-circle-up"></i> </li>
<li><i class="fa fa-chevron-circle-down" data-icon="fa fa-chevron-circle-down"></i> </li>
<li><i class="fa fa-html5" data-icon="fa fa-html5"></i> </li>
<li><i class="fa fa-css3" data-icon="fa fa-css3"></i> </li>
<li><i class="fa fa-anchor" data-icon="fa fa-anchor"></i> </li>
<li><i class="fa fa-unlock-alt" data-icon="fa fa-unlock-alt"></i> </li>
<li><i class="fa fa-bullseye" data-icon="fa fa-bullseye"></i> </li>
<li><i class="fa fa-ellipsis-h" data-icon="fa fa-ellipsis-h"></i> </li>
<li><i class="fa fa-ellipsis-v" data-icon="fa fa-ellipsis-v"></i> </li>
<li><i class="fa fa-rss-square" data-icon="fa fa-rss-square"></i> </li>
<li><i class="fa fa-play-circle" data-icon="fa fa-play-circle"></i> </li>
<li><i class="fa fa-ticket" data-icon="fa fa-ticket"></i> </li>
<li><i class="fa fa-minus-square" data-icon="fa fa-minus-square"></i> </li>
<li><i class="fa fa-minus-square-o" data-icon="fa fa-minus-square-o"></i> </li>
<li><i class="fa fa-level-up" data-icon="fa fa-level-up"></i> </li>
<li><i class="fa fa-level-down" data-icon="fa fa-level-down"></i> </li>
<li><i class="fa fa-check-square" data-icon="fa fa-check-square"></i> </li>
<li><i class="fa fa-pencil-square" data-icon="fa fa-pencil-square"></i> </li>
<li><i class="fa fa-external-link-square" data-icon="fa fa-external-link-square"></i> </li>
<li><i class="fa fa-share-square" data-icon="fa fa-share-square"></i> </li>
<li><i class="fa fa-compass" data-icon="fa fa-compass"></i> </li>
<li><i class="fa fa-caret-square-o-down" data-icon="fa fa-caret-square-o-down"></i> </li>
<li><i class="fa fa-caret-square-o-up" data-icon="fa fa-caret-square-o-up"></i> </li>
<li><i class="fa fa-caret-square-o-right" data-icon="fa fa-caret-square-o-right"></i> </li>
<li><i class="fa fa-eur" data-icon="fa fa-eur"></i> </li>
<li><i class="fa fa-gbp" data-icon="fa fa-gbp"></i> </li>
<li><i class="fa fa-usd" data-icon="fa fa-usd"></i> </li>
<li><i class="fa fa-inr" data-icon="fa fa-inr"></i> </li>
<li><i class="fa fa-jpy" data-icon="fa fa-jpy"></i> </li>
<li><i class="fa fa-rub" data-icon="fa fa-rub"></i> </li>
<li><i class="fa fa-krw" data-icon="fa fa-krw"></i> </li>
<li><i class="fa fa-btc" data-icon="fa fa-btc"></i> </li>
<li><i class="fa fa-file" data-icon="fa fa-file"></i> </li>
<li><i class="fa fa-file-text" data-icon="fa fa-file-text"></i> </li>
<li><i class="fa fa-sort-alpha-asc" data-icon="fa fa-sort-alpha-asc"></i> </li>
<li><i class="fa fa-sort-alpha-desc" data-icon="fa fa-sort-alpha-desc"></i> </li>
<li><i class="fa fa-sort-amount-asc" data-icon="fa fa-sort-amount-asc"></i> </li>
<li><i class="fa fa-sort-amount-desc" data-icon="fa fa-sort-amount-desc"></i> </li>
<li><i class="fa fa-sort-numeric-asc" data-icon="fa fa-sort-numeric-asc"></i> </li>
<li><i class="fa fa-sort-numeric-desc" data-icon="fa fa-sort-numeric-desc"></i> </li>
<li><i class="fa fa-thumbs-up" data-icon="fa fa-thumbs-up"></i> </li>
<li><i class="fa fa-thumbs-down" data-icon="fa fa-thumbs-down"></i> </li>
<li><i class="fa fa-youtube-square" data-icon="fa fa-youtube-square"></i> </li>
<li><i class="fa fa-youtube" data-icon="fa fa-youtube"></i> </li>
<li><i class="fa fa-xing" data-icon="fa fa-xing"></i> </li>
<li><i class="fa fa-xing-square" data-icon="fa fa-xing-square"></i> </li>
<li><i class="fa fa-youtube-play" data-icon="fa fa-youtube-play"></i> </li>
<li><i class="fa fa-dropbox" data-icon="fa fa-dropbox"></i> </li>
<li><i class="fa fa-stack-overflow" data-icon="fa fa-stack-overflow"></i> </li>
<li><i class="fa fa-instagram" data-icon="fa fa-instagram"></i> </li>
<li><i class="fa fa-flickr" data-icon="fa fa-flickr"></i> </li>
<li><i class="fa fa-adn" data-icon="fa fa-adn"></i> </li>
<li><i class="fa fa-bitbucket" data-icon="fa fa-bitbucket"></i> </li>
<li><i class="fa fa-bitbucket-square" data-icon="fa fa-bitbucket-square"></i> </li>
<li><i class="fa fa-tumblr" data-icon="fa fa-tumblr"></i> </li>
<li><i class="fa fa-tumblr-square" data-icon="fa fa-tumblr-square"></i> </li>
<li><i class="fa fa-long-arrow-down" data-icon="fa fa-long-arrow-down"></i> </li>
<li><i class="fa fa-long-arrow-up" data-icon="fa fa-long-arrow-up"></i> </li>
<li><i class="fa fa-long-arrow-left" data-icon="fa fa-long-arrow-left"></i> </li>
<li><i class="fa fa-long-arrow-right" data-icon="fa fa-long-arrow-right"></i> </li>
<li><i class="fa fa-apple" data-icon="fa fa-apple"></i> </li>
<li><i class="fa fa-windows" data-icon="fa fa-windows"></i> </li>
<li><i class="fa fa-android" data-icon="fa fa-android"></i> </li>
<li><i class="fa fa-linux" data-icon="fa fa-linux"></i> </li>
<li><i class="fa fa-dribbble" data-icon="fa fa-dribbble"></i> </li>
<li><i class="fa fa-skype" data-icon="fa fa-skype"></i> </li>
<li><i class="fa fa-foursquare" data-icon="fa fa-foursquare"></i> </li>
<li><i class="fa fa-trello" data-icon="fa fa-trello"></i> </li>
<li><i class="fa fa-female" data-icon="fa fa-female"></i> </li>
<li><i class="fa fa-male" data-icon="fa fa-male"></i> </li>
<li><i class="fa fa-gittip" data-icon="fa fa-gittip"></i> </li>
<li><i class="fa fa-sun-o" data-icon="fa fa-sun-o"></i> </li>
<li><i class="fa fa-moon-o" data-icon="fa fa-moon-o"></i> </li>
<li><i class="fa fa-archive" data-icon="fa fa-archive"></i> </li>
<li><i class="fa fa-bug" data-icon="fa fa-bug"></i> </li>
<li><i class="fa fa-vk" data-icon="fa fa-vk"></i> </li>
<li><i class="fa fa-weibo" data-icon="fa fa-weibo"></i> </li>
<li><i class="fa fa-renren" data-icon="fa fa-renren"></i> </li>
<li><i class="fa fa-pagelines" data-icon="fa fa-pagelines"></i> </li>
<li><i class="fa fa-stack-exchange" data-icon="fa fa-stack-exchange"></i> </li>
<li><i class="fa fa-arrow-circle-o-right" data-icon="fa fa-arrow-circle-o-right"></i> </li>
<li><i class="fa fa-arrow-circle-o-left" data-icon="fa fa-arrow-circle-o-left"></i> </li>
<li><i class="fa fa-caret-square-o-left" data-icon="fa fa-caret-square-o-left"></i> </li>
<li><i class="fa fa-dot-circle-o" data-icon="fa fa-dot-circle-o"></i> </li>
<li><i class="fa fa-wheelchair" data-icon="fa fa-wheelchair"></i> </li>
<li><i class="fa fa-vimeo-square" data-icon="fa fa-vimeo-square"></i> </li>
<li><i class="fa fa-try" data-icon="fa fa-try"></i> </li>
<li><i class="fa fa-plus-square-o" data-icon="fa fa-plus-square-o"></i> </li>
<li><i class="fa fa-space-shuttle" data-icon="fa fa-space-shuttle"></i> </li>
<li><i class="fa fa-slack" data-icon="fa fa-slack"></i> </li>
<li><i class="fa fa-envelope-square" data-icon="fa fa-envelope-square"></i> </li>
<li><i class="fa fa-wordpress" data-icon="fa fa-wordpress"></i> </li>
<li><i class="fa fa-openid" data-icon="fa fa-openid"></i> </li>
<li><i class="fa fa-university" data-icon="fa fa-university"></i> </li>
<li><i class="fa fa-graduation-cap" data-icon="fa fa-graduation-cap"></i> </li>
<li><i class="fa fa-yahoo" data-icon="fa fa-yahoo"></i> </li>
<li><i class="fa fa-google" data-icon="fa fa-google"></i> </li>
<li><i class="fa fa-reddit" data-icon="fa fa-reddit"></i> </li>
<li><i class="fa fa-reddit-square" data-icon="fa fa-reddit-square"></i> </li>
<li><i class="fa fa-stumbleupon-circle" data-icon="fa fa-stumbleupon-circle"></i> </li>
<li><i class="fa fa-stumbleupon" data-icon="fa fa-stumbleupon"></i> </li>
<li><i class="fa fa-delicious" data-icon="fa fa-delicious"></i> </li>
<li><i class="fa fa-digg" data-icon="fa fa-digg"></i> </li>
<li><i class="fa fa-pied-piper" data-icon="fa fa-pied-piper"></i> </li>
<li><i class="fa fa-pied-piper-alt" data-icon="fa fa-pied-piper-alt"></i> </li>
<li><i class="fa fa-drupal" data-icon="fa fa-drupal"></i> </li>
<li><i class="fa fa-joomla" data-icon="fa fa-joomla"></i> </li>
<li><i class="fa fa-language" data-icon="fa fa-language"></i> </li>
<li><i class="fa fa-fax" data-icon="fa fa-fax"></i> </li>
<li><i class="fa fa-building" data-icon="fa fa-building"></i> </li>
<li><i class="fa fa-child" data-icon="fa fa-child"></i> </li>
<li><i class="fa fa-paw" data-icon="fa fa-paw"></i> </li>
<li><i class="fa fa-spoon" data-icon="fa fa-spoon"></i> </li>
<li><i class="fa fa-cube" data-icon="fa fa-cube"></i> </li>
<li><i class="fa fa-cubes" data-icon="fa fa-cubes"></i> </li>
<li><i class="fa fa-behance" data-icon="fa fa-behance"></i> </li>
<li><i class="fa fa-behance-square" data-icon="fa fa-behance-square"></i> </li>
<li><i class="fa fa-steam" data-icon="fa fa-steam"></i> </li>
<li><i class="fa fa-steam-square" data-icon="fa fa-steam-square"></i> </li>
<li><i class="fa fa-recycle" data-icon="fa fa-recycle"></i> </li>
<li><i class="fa fa-car" data-icon="fa fa-car"></i> </li>
<li><i class="fa fa-taxi" data-icon="fa fa-taxi"></i> </li>
<li><i class="fa fa-tree" data-icon="fa fa-tree"></i> </li>
<li><i class="fa fa-spotify" data-icon="fa fa-spotify"></i> </li>
<li><i class="fa fa-deviantart" data-icon="fa fa-deviantart"></i> </li>
<li><i class="fa fa-soundcloud" data-icon="fa fa-soundcloud"></i> </li>
<li><i class="fa fa-database" data-icon="fa fa-database"></i> </li>
<li><i class="fa fa-file-pdf-o" data-icon="fa fa-file-pdf-o"></i> </li>
<li><i class="fa fa-file-word-o" data-icon="fa fa-file-word-o"></i> </li>
<li><i class="fa fa-file-excel-o" data-icon="fa fa-file-excel-o"></i> </li>
<li><i class="fa fa-file-powerpoint-o" data-icon="fa fa-file-powerpoint-o"></i> </li>
<li><i class="fa fa-file-image-o" data-icon="fa fa-file-image-o"></i> </li>
<li><i class="fa fa-file-archive-o" data-icon="fa fa-file-archive-o"></i> </li>
<li><i class="fa fa-file-audio-o" data-icon="fa fa-file-audio-o"></i> </li>
<li><i class="fa fa-file-video-o" data-icon="fa fa-file-video-o"></i> </li>
<li><i class="fa fa-file-code-o" data-icon="fa fa-file-code-o"></i> </li>
<li><i class="fa fa-vine" data-icon="fa fa-vine"></i> </li>
<li><i class="fa fa-codepen" data-icon="fa fa-codepen"></i> </li>
<li><i class="fa fa-jsfiddle" data-icon="fa fa-jsfiddle"></i> </li>
<li><i class="fa fa-life-ring" data-icon="fa fa-life-ring"></i> </li>
<li><i class="fa fa-circle-o-notch" data-icon="fa fa-circle-o-notch"></i> </li>
<li><i class="fa fa-rebel" data-icon="fa fa-rebel"></i> </li>
<li><i class="fa fa-empire" data-icon="fa fa-empire"></i> </li>
<li><i class="fa fa-git-square" data-icon="fa fa-git-square"></i> </li>
<li><i class="fa fa-git" data-icon="fa fa-git"></i> </li>
<li><i class="fa fa-hacker-news" data-icon="fa fa-hacker-news"></i> </li>
<li><i class="fa fa-tencent-weibo" data-icon="fa fa-tencent-weibo"></i> </li>
<li><i class="fa fa-qq" data-icon="fa fa-qq"></i> </li>
<li><i class="fa fa-weixin" data-icon="fa fa-weixin"></i> </li>
<li><i class="fa fa-paper-plane" data-icon="fa fa-paper-plane"></i> </li>
<li><i class="fa fa-paper-plane-o" data-icon="fa fa-paper-plane-o"></i> </li>
<li><i class="fa fa-history" data-icon="fa fa-history"></i> </li>
<li><i class="fa fa-circle-thin" data-icon="fa fa-circle-thin"></i> </li>
<li><i class="fa fa-header" data-icon="fa fa-header"></i> </li>
<li><i class="fa fa-paragraph" data-icon="fa fa-paragraph"></i> </li>
<li><i class="fa fa-sliders" data-icon="fa fa-sliders"></i> </li>
<li><i class="fa fa-share-alt" data-icon="fa fa-share-alt"></i> </li>
<li><i class="fa fa-share-alt-square" data-icon="fa fa-share-alt-square"></i> </li>
<li><i class="fa fa-bomb" data-icon="fa fa-bomb"></i> </li>
<li><i class="fa fa-futbol-o" data-icon="fa fa-futbol-o"></i> </li>
<li><i class="fa fa-tty" data-icon="fa fa-tty"></i> </li>
<li><i class="fa fa-binoculars" data-icon="fa fa-binoculars"></i> </li>
<li><i class="fa fa-plug" data-icon="fa fa-plug"></i> </li>
<li><i class="fa fa-slideshare" data-icon="fa fa-slideshare"></i> </li>
<li><i class="fa fa-twitch" data-icon="fa fa-twitch"></i> </li>
<li><i class="fa fa-yelp" data-icon="fa fa-yelp"></i> </li>
<li><i class="fa fa-newspaper-o" data-icon="fa fa-newspaper-o"></i> </li>
<li><i class="fa fa-wifi" data-icon="fa fa-wifi"></i> </li>
<li><i class="fa fa-calculator" data-icon="fa fa-calculator"></i> </li>
<li><i class="fa fa-paypal" data-icon="fa fa-paypal"></i> </li>
<li><i class="fa fa-google-wallet" data-icon="fa fa-google-wallet"></i> </li>
<li><i class="fa fa-cc-visa" data-icon="fa fa-cc-visa"></i> </li>
<li><i class="fa fa-cc-mastercard" data-icon="fa fa-cc-mastercard"></i> </li>
<li><i class="fa fa-cc-discover" data-icon="fa fa-cc-discover"></i> </li>
<li><i class="fa fa-cc-amex" data-icon="fa fa-cc-amex"></i> </li>
<li><i class="fa fa-cc-paypal" data-icon="fa fa-cc-paypal"></i> </li>
<li><i class="fa fa-cc-stripe" data-icon="fa fa-cc-stripe"></i> </li>
<li><i class="fa fa-bell-slash" data-icon="fa fa-bell-slash"></i> </li>
<li><i class="fa fa-bell-slash-o" data-icon="fa fa-bell-slash-o"></i> </li>
<li><i class="fa fa-trash" data-icon="fa fa-trash"></i> </li>
<li><i class="fa fa-copyright" data-icon="fa fa-copyright"></i> </li>
<li><i class="fa fa-at" data-icon="fa fa-at"></i> </li>
<li><i class="fa fa-eyedropper" data-icon="fa fa-eyedropper"></i> </li>
<li><i class="fa fa-paint-brush" data-icon="fa fa-paint-brush"></i> </li>
<li><i class="fa fa-birthday-cake" data-icon="fa fa-birthday-cake"></i> </li>
<li><i class="fa fa-area-chart" data-icon="fa fa-area-chart"></i> </li>
<li><i class="fa fa-pie-chart" data-icon="fa fa-pie-chart"></i> </li>
<li><i class="fa fa-line-chart" data-icon="fa fa-line-chart"></i> </li>
<li><i class="fa fa-lastfm" data-icon="fa fa-lastfm"></i> </li>
<li><i class="fa fa-lastfm-square" data-icon="fa fa-lastfm-square"></i> </li>
<li><i class="fa fa-toggle-off" data-icon="fa fa-toggle-off"></i> </li>
<li><i class="fa fa-toggle-on" data-icon="fa fa-toggle-on"></i> </li>
<li><i class="fa fa-bicycle" data-icon="fa fa-bicycle"></i> </li>
<li><i class="fa fa-bus" data-icon="fa fa-bus"></i> </li>
<li><i class="fa fa-ioxhost" data-icon="fa fa-ioxhost"></i> </li>
<li><i class="fa fa-angellist" data-icon="fa fa-angellist"></i> </li>
<li><i class="fa fa-cc" data-icon="fa fa-cc"></i> </li>
<li><i class="fa fa-ils" data-icon="fa fa-ils"></i> </li>
<li><i class="fa fa-meanpath" data-icon="fa fa-meanpath"></i> </li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment