(function() {
angular.module("IconFinder", ["ngAnimate", "ngClipboard"])
.config(['ngClipProvider',
function(ngClipProvider) {
ngClipProvider.setPath("http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
}
])
.controller("IconCtrl", IconCtrl)
.factory("IconFactory", IconFactory);
// controller function IconCtrl
function IconCtrl(IconFactory) {
var ctrl = this;
// initialize controller
init();
// init function
function init() {
// define controller variables
ctrl.search = {
name: "",
group: ""
};
ctrl.selectedIcon = "";
// define controller functions
ctrl.getTag = getTag;
ctrl.clearFilters = clearFilters;
// get icons from IconFactory
IconFactory.getIcons()
.then(function(response) {
ctrl.icons = response.data;
ctrl.groups = [];
ctrl.icons.forEach(function(icon) {
var group = icon.group;
if (ctrl.groups.indexOf(group) < 0) {
ctrl.groups.push(group);
}
});
});
}
// get font awesome icon tag given a font awesome name
function getTag(name) {
var tag = '<i class="fa ' + name + '"></i>';
ctrl.selectedIcon = name + " copied to clipboard...";
return tag;
}
// clear search filters
function clearFilters(attr) {
ctrl.search[attr] = "";
}
}
// factory function IconFactory
function IconFactory($http) {
return {
getIcons: function() {
return $http.get("data.json").then(function(response) {
return response;
});
}
};
}
})();
<!DOCTYPE html>
<html ng-app="IconFinder">
<head>
<meta charset="utf-8" />
<title>Font Awesome IconFinder</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container" ng-controller="IconCtrl as IconCtrl">
<!-- header -->
<header class="page-header">
<h1><i class="fa fa-flag"></i> Font Awesome IconFinder</h1>
<p class="text-small">Search for <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> icons quickly using this AngularJS application.</p>
</header>
<main class="container">
<!-- instructions section -->
<section id="instructions" class="row">
<p class="text-small">Use the search filters/widgets below to narrow down on font icons. Click on the font icon to copy the css tag to the clipboard!</p>
<!-- search form -->
<form class="form-horizontal">
<div class="form-group">
<label for="nameSearch" class="control-label col-xs-2 col-xs-offset-2"><i class="fa fa-search"></i> Name</label>
<div class="col-md-8">
<input type="text" id="nameSearch" class="btn btn-default" ng-model="IconCtrl.search.name" />
<a class="btn btn-default" ng-click="IconCtrl.clearFilters('name')" title="Clear name filter"><i class="fa fa-close"></i></a>
</div>
</div>
<div class="form-group">
<label for="groupSearch" class="control-label col-xs-2 col-xs-offset-2"><i class="fa fa-search"></i> Group</label>
<div class="col-md-8">
<select id="groupSearch" class="btn btn-default" ng-model="IconCtrl.search.group" ng-options="group for group in IconCtrl.groups"></select>
<a class="btn btn-default" ng-click="IconCtrl.clearFilters('group')" title="Clear group filter"><i class="fa fa-close"></i></a>
</div>
</div>
</form>
</section>
<hr />
<!-- icon matrix section -->
<section id="icon-matrix" class="row">
<h2>IconFinder</h2>
<p class="text-small">{{ IconCtrl.selectedIcon }}</p>
<div class="col-sm-8 col-sm-offset-2">
<div class="tile repeat-animation" ng-repeat="icon in IconCtrl.icons | filter: IconCtrl.search:strict">
<a href="#" class="btn btn-default" clip-copy="IconCtrl.getTag(icon.name)" ng-click="IconCtrl.getTag(icon.name)" title="Click to copy" ><i class=" fa {{ icon.name }}"></i></a>
<p class="name">{{ icon.name }}</p>
<p class="group">({{ icon.group }})</p>
</div>
</div>
</section>
<hr />
<!-- Python Parser section -->
<section id="parser" class="row">
<h2>Python Parser</h2>
<p class="text-small">This is the Python code used to scrape and parse an <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">official list</a> of all updated Font Awesome fonts into a simple JSON list.</p>
<pre>
import requests
import lxml.html
import json
response = requests.get("http://fortawesome.github.io/Font-Awesome/icons/")
root = lxml.html.fromstring(response.text)
result = []
groups = root.xpath(".//section")
for group in groups:
icons = group.xpath(".//i/@class")
for icon in icons:
result.append({"name": icon.split()[1], "group": group.values()[0]})
print(json.dumps(result))
</pre>
</section>
</main>
<!-- footer -->
<footer>
<p><a href="https://gist.github.com/chrisrzhou/4a41fe71b9be79ec1479" target="_blank"><i class="fa fa-flag"></i> IconFinder</a> by chrisrzhou, 2014-12-22
<br />
<a href="http://github.com/chrisrzhou" target="_blank"><i class="fa fa-github"></i></a> |
<a href="http://bl.ocks.org/chrisrzhou" target="_blank"><i class="fa fa-th"></i></a> |
<a href="http://www.linkedin.com/in/chrisrzhou" target="_blank"><i class="fa fa-linkedin"></i></a>
</p>
</footer>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="https://rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="app.js"></script>
<script>
// Hack to make this example display correctly in an iframe on bl.ocks.org
d3.select(self.frameElement).style("height", "1000px");
</script>
</body>
</html>
html {
overflow-y: scroll;
}
body {
padding-bottom: 50px;
}
h1 {
color: steelblue;
font-weight: 800;
font-size: 1.7em;
}
h2 {
color: steelblue;
font-size: 1.3em;
padding-bottom: 10px;
}
footer a,
footer a:hover, footer a:visited {
color: #D2A000;
}
.text-small {
font-size: 12px;
font-style: italic;
}
footer {
color: white;
padding-top: 5px;
border-top: 1px solid gray;
font-size: 12px;
position: fixed;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
background: black;
text-align: center;
}
.tile {
display: inline-block;
width: 125px;
height: 75px;
}
.tile i {
color: steelblue;
font-size: 1.2em;
}
.tile .name {
font-size: 0.75em;
}
.tile .group {
color: #bbb;
margin-top: -12px;
font-size: 0.7em;
}
#icon-matrix {
text-align: center;
}
#parser pre {
font-size: 10px;
}
.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
/* ending enter and move styling
(this is what the element will animate from */
.repeat-animation.ng-enter,
.repeat-animation.ng-move { opacity:0; }
/* ending enter and move styling
(this is what the element will animate towards */
.repeat-animation.ng-enter.ng-enter-active,
.repeat-animation.ng-move.ng-move-active { opacity:1; }
/* starting leave animation */
.repeat-animation.ng-leave { opacity:1; }
/* ending leave animation */
.repeat-animation.ng-leave.ng-leave-active { opacity:0; }
[{"group": "web-application", "name": "fa-adjust"}, {"group": "web-application", "name": "fa-anchor"}, {"group": "web-application", "name": "fa-archive"}, {"group": "web-application", "name": "fa-area-chart"}, {"group": "web-application", "name": "fa-arrows"}, {"group": "web-application", "name": "fa-arrows-h"}, {"group": "web-application", "name": "fa-arrows-v"}, {"group": "web-application", "name": "fa-asterisk"}, {"group": "web-application", "name": "fa-at"}, {"group": "web-application", "name": "fa-automobile"}, {"group": "web-application", "name": "fa-ban"}, {"group": "web-application", "name": "fa-bank"}, {"group": "web-application", "name": "fa-bar-chart"}, {"group": "web-application", "name": "fa-bar-chart-o"}, {"group": "web-application", "name": "fa-barcode"}, {"group": "web-application", "name": "fa-bars"}, {"group": "web-application", "name": "fa-beer"}, {"group": "web-application", "name": "fa-bell"}, {"group": "web-application", "name": "fa-bell-o"}, {"group": "web-application", "name": "fa-bell-slash"}, {"group": "web-application", "name": "fa-bell-slash-o"}, {"group": "web-application", "name": "fa-bicycle"}, {"group": "web-application", "name": "fa-binoculars"}, {"group": "web-application", "name": "fa-birthday-cake"}, {"group": "web-application", "name": "fa-bolt"}, {"group": "web-application", "name": "fa-bomb"}, {"group": "web-application", "name": "fa-book"}, {"group": "web-application", "name": "fa-bookmark"}, {"group": "web-application", "name": "fa-bookmark-o"}, {"group": "web-application", "name": "fa-briefcase"}, {"group": "web-application", "name": "fa-bug"}, {"group": "web-application", "name": "fa-building"}, {"group": "web-application", "name": "fa-building-o"}, {"group": "web-application", "name": "fa-bullhorn"}, {"group": "web-application", "name": "fa-bullseye"}, {"group": "web-application", "name": "fa-bus"}, {"group": "web-application", "name": "fa-cab"}, {"group": "web-application", "name": "fa-calculator"}, {"group": "web-application", "name": "fa-calendar"}, {"group": "web-application", "name": "fa-calendar-o"}, {"group": "web-application", "name": "fa-camera"}, {"group": "web-application", "name": "fa-camera-retro"}, {"group": "web-application", "name": "fa-car"}, {"group": "web-application", "name": "fa-caret-square-o-down"}, {"group": "web-application", "name": "fa-caret-square-o-left"}, {"group": "web-application", "name": "fa-caret-square-o-right"}, {"group": "web-application", "name": "fa-caret-square-o-up"}, {"group": "web-application", "name": "fa-cc"}, {"group": "web-application", "name": "fa-certificate"}, {"group": "web-application", "name": "fa-check"}, {"group": "web-application", "name": "fa-check-circle"}, {"group": "web-application", "name": "fa-check-circle-o"}, {"group": "web-application", "name": "fa-check-square"}, {"group": "web-application", "name": "fa-check-square-o"}, {"group": "web-application", "name": "fa-child"}, {"group": "web-application", "name": "fa-circle"}, {"group": "web-application", "name": "fa-circle-o"}, {"group": "web-application", "name": "fa-circle-o-notch"}, {"group": "web-application", "name": "fa-circle-thin"}, {"group": "web-application", "name": "fa-clock-o"}, {"group": "web-application", "name": "fa-close"}, {"group": "web-application", "name": "fa-cloud"}, {"group": "web-application", "name": "fa-cloud-download"}, {"group": "web-application", "name": "fa-cloud-upload"}, {"group": "web-application", "name": "fa-code"}, {"group": "web-application", "name": "fa-code-fork"}, {"group": "web-application", "name": "fa-coffee"}, {"group": "web-application", "name": "fa-cog"}, {"group": "web-application", "name": "fa-cogs"}, {"group": "web-application", "name": "fa-comment"}, {"group": "web-application", "name": "fa-comment-o"}, {"group": "web-application", "name": "fa-comments"}, {"group": "web-application", "name": "fa-comments-o"}, {"group": "web-application", "name": "fa-compass"}, {"group": "web-application", "name": "fa-copyright"}, {"group": "web-application", "name": "fa-credit-card"}, {"group": "web-application", "name": "fa-crop"}, {"group": "web-application", "name": "fa-crosshairs"}, {"group": "web-application", "name": "fa-cube"}, {"group": "web-application", "name": "fa-cubes"}, {"group": "web-application", "name": "fa-cutlery"}, {"group": "web-application", "name": "fa-dashboard"}, {"group": "web-application", "name": "fa-database"}, {"group": "web-application", "name": "fa-desktop"}, {"group": "web-application", "name": "fa-dot-circle-o"}, {"group": "web-application", "name": "fa-download"}, {"group": "web-application", "name": "fa-edit"}, {"group": "web-application", "name": "fa-ellipsis-h"}, {"group": "web-application", "name": "fa-ellipsis-v"}, {"group": "web-application", "name": "fa-envelope"}, {"group": "web-application", "name": "fa-envelope-o"}, {"group": "web-application", "name": "fa-envelope-square"}, {"group": "web-application", "name": "fa-eraser"}, {"group": "web-application", "name": "fa-exchange"}, {"group": "web-application", "name": "fa-exclamation"}, {"group": "web-application", "name": "fa-exclamation-circle"}, {"group": "web-application", "name": "fa-exclamation-triangle"}, {"group": "web-application", "name": "fa-external-link"}, {"group": "web-application", "name": "fa-external-link-square"}, {"group": "web-application", "name": "fa-eye"}, {"group": "web-application", "name": "fa-eye-slash"}, {"group": "web-application", "name": "fa-eyedropper"}, {"group": "web-application", "name": "fa-fax"}, {"group": "web-application", "name": "fa-female"}, {"group": "web-application", "name": "fa-fighter-jet"}, {"group": "web-application", "name": "fa-file-archive-o"}, {"group": "web-application", "name": "fa-file-audio-o"}, {"group": "web-application", "name": "fa-file-code-o"}, {"group": "web-application", "name": "fa-file-excel-o"}, {"group": "web-application", "name": "fa-file-image-o"}, {"group": "web-application", "name": "fa-file-movie-o"}, {"group": "web-application", "name": "fa-file-pdf-o"}, {"group": "web-application", "name": "fa-file-photo-o"}, {"group": "web-application", "name": "fa-file-picture-o"}, {"group": "web-application", "name": "fa-file-powerpoint-o"}, {"group": "web-application", "name": "fa-file-sound-o"}, {"group": "web-application", "name": "fa-file-video-o"}, {"group": "web-application", "name": "fa-file-word-o"}, {"group": "web-application", "name": "fa-file-zip-o"}, {"group": "web-application", "name": "fa-film"}, {"group": "web-application", "name": "fa-filter"}, {"group": "web-application", "name": "fa-fire"}, {"group": "web-application", "name": "fa-fire-extinguisher"}, {"group": "web-application", "name": "fa-flag"}, {"group": "web-application", "name": "fa-flag-checkered"}, {"group": "web-application", "name": "fa-flag-o"}, {"group": "web-application", "name": "fa-flash"}, {"group": "web-application", "name": "fa-flask"}, {"group": "web-application", "name": "fa-folder"}, {"group": "web-application", "name": "fa-folder-o"}, {"group": "web-application", "name": "fa-folder-open"}, {"group": "web-application", "name": "fa-folder-open-o"}, {"group": "web-application", "name": "fa-frown-o"}, {"group": "web-application", "name": "fa-futbol-o"}, {"group": "web-application", "name": "fa-gamepad"}, {"group": "web-application", "name": "fa-gavel"}, {"group": "web-application", "name": "fa-gear"}, {"group": "web-application", "name": "fa-gears"}, {"group": "web-application", "name": "fa-gift"}, {"group": "web-application", "name": "fa-glass"}, {"group": "web-application", "name": "fa-globe"}, {"group": "web-application", "name": "fa-graduation-cap"}, {"group": "web-application", "name": "fa-group"}, {"group": "web-application", "name": "fa-hdd-o"}, {"group": "web-application", "name": "fa-headphones"}, {"group": "web-application", "name": "fa-heart"}, {"group": "web-application", "name": "fa-heart-o"}, {"group": "web-application", "name": "fa-history"}, {"group": "web-application", "name": "fa-home"}, {"group": "web-application", "name": "fa-image"}, {"group": "web-application", "name": "fa-inbox"}, {"group": "web-application", "name": "fa-info"}, {"group": "web-application", "name": "fa-info-circle"}, {"group": "web-application", "name": "fa-institution"}, {"group": "web-application", "name": "fa-key"}, {"group": "web-application", "name": "fa-keyboard-o"}, {"group": "web-application", "name": "fa-language"}, {"group": "web-application", "name": "fa-laptop"}, {"group": "web-application", "name": "fa-leaf"}, {"group": "web-application", "name": "fa-legal"}, {"group": "web-application", "name": "fa-lemon-o"}, {"group": "web-application", "name": "fa-level-down"}, {"group": "web-application", "name": "fa-level-up"}, {"group": "web-application", "name": "fa-life-bouy"}, {"group": "web-application", "name": "fa-life-buoy"}, {"group": "web-application", "name": "fa-life-ring"}, {"group": "web-application", "name": "fa-life-saver"}, {"group": "web-application", "name": "fa-lightbulb-o"}, {"group": "web-application", "name": "fa-line-chart"}, {"group": "web-application", "name": "fa-location-arrow"}, {"group": "web-application", "name": "fa-lock"}, {"group": "web-application", "name": "fa-magic"}, {"group": "web-application", "name": "fa-magnet"}, {"group": "web-application", "name": "fa-mail-forward"}, {"group": "web-application", "name": "fa-mail-reply"}, {"group": "web-application", "name": "fa-mail-reply-all"}, {"group": "web-application", "name": "fa-male"}, {"group": "web-application", "name": "fa-map-marker"}, {"group": "web-application", "name": "fa-meh-o"}, {"group": "web-application", "name": "fa-microphone"}, {"group": "web-application", "name": "fa-microphone-slash"}, {"group": "web-application", "name": "fa-minus"}, {"group": "web-application", "name": "fa-minus-circle"}, {"group": "web-application", "name": "fa-minus-square"}, {"group": "web-application", "name": "fa-minus-square-o"}, {"group": "web-application", "name": "fa-mobile"}, {"group": "web-application", "name": "fa-mobile-phone"}, {"group": "web-application", "name": "fa-money"}, {"group": "web-application", "name": "fa-moon-o"}, {"group": "web-application", "name": "fa-mortar-board"}, {"group": "web-application", "name": "fa-music"}, {"group": "web-application", "name": "fa-navicon"}, {"group": "web-application", "name": "fa-newspaper-o"}, {"group": "web-application", "name": "fa-paint-brush"}, {"group": "web-application", "name": "fa-paper-plane"}, {"group": "web-application", "name": "fa-paper-plane-o"}, {"group": "web-application", "name": "fa-paw"}, {"group": "web-application", "name": "fa-pencil"}, {"group": "web-application", "name": "fa-pencil-square"}, {"group": "web-application", "name": "fa-pencil-square-o"}, {"group": "web-application", "name": "fa-phone"}, {"group": "web-application", "name": "fa-phone-square"}, {"group": "web-application", "name": "fa-photo"}, {"group": "web-application", "name": "fa-picture-o"}, {"group": "web-application", "name": "fa-pie-chart"}, {"group": "web-application", "name": "fa-plane"}, {"group": "web-application", "name": "fa-plug"}, {"group": "web-application", "name": "fa-plus"}, {"group": "web-application", "name": "fa-plus-circle"}, {"group": "web-application", "name": "fa-plus-square"}, {"group": "web-application", "name": "fa-plus-square-o"}, {"group": "web-application", "name": "fa-power-off"}, {"group": "web-application", "name": "fa-print"}, {"group": "web-application", "name": "fa-puzzle-piece"}, {"group": "web-application", "name": "fa-qrcode"}, {"group": "web-application", "name": "fa-question"}, {"group": "web-application", "name": "fa-question-circle"}, {"group": "web-application", "name": "fa-quote-left"}, {"group": "web-application", "name": "fa-quote-right"}, {"group": "web-application", "name": "fa-random"}, {"group": "web-application", "name": "fa-recycle"}, {"group": "web-application", "name": "fa-refresh"}, {"group": "web-application", "name": "fa-remove"}, {"group": "web-application", "name": "fa-reorder"}, {"group": "web-application", "name": "fa-reply"}, {"group": "web-application", "name": "fa-reply-all"}, {"group": "web-application", "name": "fa-retweet"}, {"group": "web-application", "name": "fa-road"}, {"group": "web-application", "name": "fa-rocket"}, {"group": "web-application", "name": "fa-rss"}, {"group": "web-application", "name": "fa-rss-square"}, {"group": "web-application", "name": "fa-search"}, {"group": "web-application", "name": "fa-search-minus"}, {"group": "web-application", "name": "fa-search-plus"}, {"group": "web-application", "name": "fa-send"}, {"group": "web-application", "name": "fa-send-o"}, {"group": "web-application", "name": "fa-share"}, {"group": "web-application", "name": "fa-share-alt"}, {"group": "web-application", "name": "fa-share-alt-square"}, {"group": "web-application", "name": "fa-share-square"}, {"group": "web-application", "name": "fa-share-square-o"}, {"group": "web-application", "name": "fa-shield"}, {"group": "web-application", "name": "fa-shopping-cart"}, {"group": "web-application", "name": "fa-sign-in"}, {"group": "web-application", "name": "fa-sign-out"}, {"group": "web-application", "name": "fa-signal"}, {"group": "web-application", "name": "fa-sitemap"}, {"group": "web-application", "name": "fa-sliders"}, {"group": "web-application", "name": "fa-smile-o"}, {"group": "web-application", "name": "fa-soccer-ball-o"}, {"group": "web-application", "name": "fa-sort"}, {"group": "web-application", "name": "fa-sort-alpha-asc"}, {"group": "web-application", "name": "fa-sort-alpha-desc"}, {"group": "web-application", "name": "fa-sort-amount-asc"}, {"group": "web-application", "name": "fa-sort-amount-desc"}, {"group": "web-application", "name": "fa-sort-asc"}, {"group": "web-application", "name": "fa-sort-desc"}, {"group": "web-application", "name": "fa-sort-down"}, {"group": "web-application", "name": "fa-sort-numeric-asc"}, {"group": "web-application", "name": "fa-sort-numeric-desc"}, {"group": "web-application", "name": "fa-sort-up"}, {"group": "web-application", "name": "fa-space-shuttle"}, {"group": "web-application", "name": "fa-spinner"}, {"group": "web-application", "name": "fa-spoon"}, {"group": "web-application", "name": "fa-square"}, {"group": "web-application", "name": "fa-square-o"}, {"group": "web-application", "name": "fa-star"}, {"group": "web-application", "name": "fa-star-half"}, {"group": "web-application", "name": "fa-star-half-empty"}, {"group": "web-application", "name": "fa-star-half-full"}, {"group": "web-application", "name": "fa-star-half-o"}, {"group": "web-application", "name": "fa-star-o"}, {"group": "web-application", "name": "fa-suitcase"}, {"group": "web-application", "name": "fa-sun-o"}, {"group": "web-application", "name": "fa-support"}, {"group": "web-application", "name": "fa-tablet"}, {"group": "web-application", "name": "fa-tachometer"}, {"group": "web-application", "name": "fa-tag"}, {"group": "web-application", "name": "fa-tags"}, {"group": "web-application", "name": "fa-tasks"}, {"group": "web-application", "name": "fa-taxi"}, {"group": "web-application", "name": "fa-terminal"}, {"group": "web-application", "name": "fa-thumb-tack"}, {"group": "web-application", "name": "fa-thumbs-down"}, {"group": "web-application", "name": "fa-thumbs-o-down"}, {"group": "web-application", "name": "fa-thumbs-o-up"}, {"group": "web-application", "name": "fa-thumbs-up"}, {"group": "web-application", "name": "fa-ticket"}, {"group": "web-application", "name": "fa-times"}, {"group": "web-application", "name": "fa-times-circle"}, {"group": "web-application", "name": "fa-times-circle-o"}, {"group": "web-application", "name": "fa-tint"}, {"group": "web-application", "name": "fa-toggle-down"}, {"group": "web-application", "name": "fa-toggle-left"}, {"group": "web-application", "name": "fa-toggle-off"}, {"group": "web-application", "name": "fa-toggle-on"}, {"group": "web-application", "name": "fa-toggle-right"}, {"group": "web-application", "name": "fa-toggle-up"}, {"group": "web-application", "name": "fa-trash"}, {"group": "web-application", "name": "fa-trash-o"}, {"group": "web-application", "name": "fa-tree"}, {"group": "web-application", "name": "fa-trophy"}, {"group": "web-application", "name": "fa-truck"}, {"group": "web-application", "name": "fa-tty"}, {"group": "web-application", "name": "fa-umbrella"}, {"group": "web-application", "name": "fa-university"}, {"group": "web-application", "name": "fa-unlock"}, {"group": "web-application", "name": "fa-unlock-alt"}, {"group": "web-application", "name": "fa-unsorted"}, {"group": "web-application", "name": "fa-upload"}, {"group": "web-application", "name": "fa-user"}, {"group": "web-application", "name": "fa-users"}, {"group": "web-application", "name": "fa-video-camera"}, {"group": "web-application", "name": "fa-volume-down"}, {"group": "web-application", "name": "fa-volume-off"}, {"group": "web-application", "name": "fa-volume-up"}, {"group": "web-application", "name": "fa-warning"}, {"group": "web-application", "name": "fa-wheelchair"}, {"group": "web-application", "name": "fa-wifi"}, {"group": "web-application", "name": "fa-wrench"}, {"group": "file-type", "name": "fa-file"}, {"group": "file-type", "name": "fa-file-archive-o"}, {"group": "file-type", "name": "fa-file-audio-o"}, {"group": "file-type", "name": "fa-file-code-o"}, {"group": "file-type", "name": "fa-file-excel-o"}, {"group": "file-type", "name": "fa-file-image-o"}, {"group": "file-type", "name": "fa-file-movie-o"}, {"group": "file-type", "name": "fa-file-o"}, {"group": "file-type", "name": "fa-file-pdf-o"}, {"group": "file-type", "name": "fa-file-photo-o"}, {"group": "file-type", "name": "fa-file-picture-o"}, {"group": "file-type", "name": "fa-file-powerpoint-o"}, {"group": "file-type", "name": "fa-file-sound-o"}, {"group": "file-type", "name": "fa-file-text"}, {"group": "file-type", "name": "fa-file-text-o"}, {"group": "file-type", "name": "fa-file-video-o"}, {"group": "file-type", "name": "fa-file-word-o"}, {"group": "file-type", "name": "fa-file-zip-o"}, {"group": "spinner", "name": "fa-info-circle"}, {"group": "spinner", "name": "fa-circle-o-notch"}, {"group": "spinner", "name": "fa-cog"}, {"group": "spinner", "name": "fa-gear"}, {"group": "spinner", "name": "fa-refresh"}, {"group": "spinner", "name": "fa-spinner"}, {"group": "form-control", "name": "fa-check-square"}, {"group": "form-control", "name": "fa-check-square-o"}, {"group": "form-control", "name": "fa-circle"}, {"group": "form-control", "name": "fa-circle-o"}, {"group": "form-control", "name": "fa-dot-circle-o"}, {"group": "form-control", "name": "fa-minus-square"}, {"group": "form-control", "name": "fa-minus-square-o"}, {"group": "form-control", "name": "fa-plus-square"}, {"group": "form-control", "name": "fa-plus-square-o"}, {"group": "form-control", "name": "fa-square"}, {"group": "form-control", "name": "fa-square-o"}, {"group": "payment", "name": "fa-cc-amex"}, {"group": "payment", "name": "fa-cc-discover"}, {"group": "payment", "name": "fa-cc-mastercard"}, {"group": "payment", "name": "fa-cc-paypal"}, {"group": "payment", "name": "fa-cc-stripe"}, {"group": "payment", "name": "fa-cc-visa"}, {"group": "payment", "name": "fa-credit-card"}, {"group": "payment", "name": "fa-google-wallet"}, {"group": "payment", "name": "fa-paypal"}, {"group": "chart", "name": "fa-area-chart"}, {"group": "chart", "name": "fa-bar-chart"}, {"group": "chart", "name": "fa-bar-chart-o"}, {"group": "chart", "name": "fa-line-chart"}, {"group": "chart", "name": "fa-pie-chart"}, {"group": "currency", "name": "fa-bitcoin"}, {"group": "currency", "name": "fa-btc"}, {"group": "currency", "name": "fa-cny"}, {"group": "currency", "name": "fa-dollar"}, {"group": "currency", "name": "fa-eur"}, {"group": "currency", "name": "fa-euro"}, {"group": "currency", "name": "fa-gbp"}, {"group": "currency", "name": "fa-ils"}, {"group": "currency", "name": "fa-inr"}, {"group": "currency", "name": "fa-jpy"}, {"group": "currency", "name": "fa-krw"}, {"group": "currency", "name": "fa-money"}, {"group": "currency", "name": "fa-rmb"}, {"group": "currency", "name": "fa-rouble"}, {"group": "currency", "name": "fa-rub"}, {"group": "currency", "name": "fa-ruble"}, {"group": "currency", "name": "fa-rupee"}, {"group": "currency", "name": "fa-shekel"}, {"group": "currency", "name": "fa-sheqel"}, {"group": "currency", "name": "fa-try"}, {"group": "currency", "name": "fa-turkish-lira"}, {"group": "currency", "name": "fa-usd"}, {"group": "currency", "name": "fa-won"}, {"group": "currency", "name": "fa-yen"}, {"group": "text-editor", "name": "fa-align-center"}, {"group": "text-editor", "name": "fa-align-justify"}, {"group": "text-editor", "name": "fa-align-left"}, {"group": "text-editor", "name": "fa-align-right"}, {"group": "text-editor", "name": "fa-bold"}, {"group": "text-editor", "name": "fa-chain"}, {"group": "text-editor", "name": "fa-chain-broken"}, {"group": "text-editor", "name": "fa-clipboard"}, {"group": "text-editor", "name": "fa-columns"}, {"group": "text-editor", "name": "fa-copy"}, {"group": "text-editor", "name": "fa-cut"}, {"group": "text-editor", "name": "fa-dedent"}, {"group": "text-editor", "name": "fa-eraser"}, {"group": "text-editor", "name": "fa-file"}, {"group": "text-editor", "name": "fa-file-o"}, {"group": "text-editor", "name": "fa-file-text"}, {"group": "text-editor", "name": "fa-file-text-o"}, {"group": "text-editor", "name": "fa-files-o"}, {"group": "text-editor", "name": "fa-floppy-o"}, {"group": "text-editor", "name": "fa-font"}, {"group": "text-editor", "name": "fa-header"}, {"group": "text-editor", "name": "fa-indent"}, {"group": "text-editor", "name": "fa-italic"}, {"group": "text-editor", "name": "fa-link"}, {"group": "text-editor", "name": "fa-list"}, {"group": "text-editor", "name": "fa-list-alt"}, {"group": "text-editor", "name": "fa-list-ol"}, {"group": "text-editor", "name": "fa-list-ul"}, {"group": "text-editor", "name": "fa-outdent"}, {"group": "text-editor", "name": "fa-paperclip"}, {"group": "text-editor", "name": "fa-paragraph"}, {"group": "text-editor", "name": "fa-paste"}, {"group": "text-editor", "name": "fa-repeat"}, {"group": "text-editor", "name": "fa-rotate-left"}, {"group": "text-editor", "name": "fa-rotate-right"}, {"group": "text-editor", "name": "fa-save"}, {"group": "text-editor", "name": "fa-scissors"}, {"group": "text-editor", "name": "fa-strikethrough"}, {"group": "text-editor", "name": "fa-subscript"}, {"group": "text-editor", "name": "fa-superscript"}, {"group": "text-editor", "name": "fa-table"}, {"group": "text-editor", "name": "fa-text-height"}, {"group": "text-editor", "name": "fa-text-width"}, {"group": "text-editor", "name": "fa-th"}, {"group": "text-editor", "name": "fa-th-large"}, {"group": "text-editor", "name": "fa-th-list"}, {"group": "text-editor", "name": "fa-underline"}, {"group": "text-editor", "name": "fa-undo"}, {"group": "text-editor", "name": "fa-unlink"}, {"group": "directional", "name": "fa-angle-double-down"}, {"group": "directional", "name": "fa-angle-double-left"}, {"group": "directional", "name": "fa-angle-double-right"}, {"group": "directional", "name": "fa-angle-double-up"}, {"group": "directional", "name": "fa-angle-down"}, {"group": "directional", "name": "fa-angle-left"}, {"group": "directional", "name": "fa-angle-right"}, {"group": "directional", "name": "fa-angle-up"}, {"group": "directional", "name": "fa-arrow-circle-down"}, {"group": "directional", "name": "fa-arrow-circle-left"}, {"group": "directional", "name": "fa-arrow-circle-o-down"}, {"group": "directional", "name": "fa-arrow-circle-o-left"}, {"group": "directional", "name": "fa-arrow-circle-o-right"}, {"group": "directional", "name": "fa-arrow-circle-o-up"}, {"group": "directional", "name": "fa-arrow-circle-right"}, {"group": "directional", "name": "fa-arrow-circle-up"}, {"group": "directional", "name": "fa-arrow-down"}, {"group": "directional", "name": "fa-arrow-left"}, {"group": "directional", "name": "fa-arrow-right"}, {"group": "directional", "name": "fa-arrow-up"}, {"group": "directional", "name": "fa-arrows"}, {"group": "directional", "name": "fa-arrows-alt"}, {"group": "directional", "name": "fa-arrows-h"}, {"group": "directional", "name": "fa-arrows-v"}, {"group": "directional", "name": "fa-caret-down"}, {"group": "directional", "name": "fa-caret-left"}, {"group": "directional", "name": "fa-caret-right"}, {"group": "directional", "name": "fa-caret-square-o-down"}, {"group": "directional", "name": "fa-caret-square-o-left"}, {"group": "directional", "name": "fa-caret-square-o-right"}, {"group": "directional", "name": "fa-caret-square-o-up"}, {"group": "directional", "name": "fa-caret-up"}, {"group": "directional", "name": "fa-chevron-circle-down"}, {"group": "directional", "name": "fa-chevron-circle-left"}, {"group": "directional", "name": "fa-chevron-circle-right"}, {"group": "directional", "name": "fa-chevron-circle-up"}, {"group": "directional", "name": "fa-chevron-down"}, {"group": "directional", "name": "fa-chevron-left"}, {"group": "directional", "name": "fa-chevron-right"}, {"group": "directional", "name": "fa-chevron-up"}, {"group": "directional", "name": "fa-hand-o-down"}, {"group": "directional", "name": "fa-hand-o-left"}, {"group": "directional", "name": "fa-hand-o-right"}, {"group": "directional", "name": "fa-hand-o-up"}, {"group": "directional", "name": "fa-long-arrow-down"}, {"group": "directional", "name": "fa-long-arrow-left"}, {"group": "directional", "name": "fa-long-arrow-right"}, {"group": "directional", "name": "fa-long-arrow-up"}, {"group": "directional", "name": "fa-toggle-down"}, {"group": "directional", "name": "fa-toggle-left"}, {"group": "directional", "name": "fa-toggle-right"}, {"group": "directional", "name": "fa-toggle-up"}, {"group": "video-player", "name": "fa-arrows-alt"}, {"group": "video-player", "name": "fa-backward"}, {"group": "video-player", "name": "fa-compress"}, {"group": "video-player", "name": "fa-eject"}, {"group": "video-player", "name": "fa-expand"}, {"group": "video-player", "name": "fa-fast-backward"}, {"group": "video-player", "name": "fa-fast-forward"}, {"group": "video-player", "name": "fa-forward"}, {"group": "video-player", "name": "fa-pause"}, {"group": "video-player", "name": "fa-play"}, {"group": "video-player", "name": "fa-play-circle"}, {"group": "video-player", "name": "fa-play-circle-o"}, {"group": "video-player", "name": "fa-step-backward"}, {"group": "video-player", "name": "fa-step-forward"}, {"group": "video-player", "name": "fa-stop"}, {"group": "video-player", "name": "fa-youtube-play"}, {"group": "brand", "name": "fa-warning"}, {"group": "brand", "name": "fa-adn"}, {"group": "brand", "name": "fa-android"}, {"group": "brand", "name": "fa-angellist"}, {"group": "brand", "name": "fa-apple"}, {"group": "brand", "name": "fa-behance"}, {"group": "brand", "name": "fa-behance-square"}, {"group": "brand", "name": "fa-bitbucket"}, {"group": "brand", "name": "fa-bitbucket-square"}, {"group": "brand", "name": "fa-bitcoin"}, {"group": "brand", "name": "fa-btc"}, {"group": "brand", "name": "fa-cc-amex"}, {"group": "brand", "name": "fa-cc-discover"}, {"group": "brand", "name": "fa-cc-mastercard"}, {"group": "brand", "name": "fa-cc-paypal"}, {"group": "brand", "name": "fa-cc-stripe"}, {"group": "brand", "name": "fa-cc-visa"}, {"group": "brand", "name": "fa-codepen"}, {"group": "brand", "name": "fa-css3"}, {"group": "brand", "name": "fa-delicious"}, {"group": "brand", "name": "fa-deviantart"}, {"group": "brand", "name": "fa-digg"}, {"group": "brand", "name": "fa-dribbble"}, {"group": "brand", "name": "fa-dropbox"}, {"group": "brand", "name": "fa-drupal"}, {"group": "brand", "name": "fa-empire"}, {"group": "brand", "name": "fa-facebook"}, {"group": "brand", "name": "fa-facebook-square"}, {"group": "brand", "name": "fa-flickr"}, {"group": "brand", "name": "fa-foursquare"}, {"group": "brand", "name": "fa-ge"}, {"group": "brand", "name": "fa-git"}, {"group": "brand", "name": "fa-git-square"}, {"group": "brand", "name": "fa-github"}, {"group": "brand", "name": "fa-github-alt"}, {"group": "brand", "name": "fa-github-square"}, {"group": "brand", "name": "fa-gittip"}, {"group": "brand", "name": "fa-google"}, {"group": "brand", "name": "fa-google-plus"}, {"group": "brand", "name": "fa-google-plus-square"}, {"group": "brand", "name": "fa-google-wallet"}, {"group": "brand", "name": "fa-hacker-news"}, {"group": "brand", "name": "fa-html5"}, {"group": "brand", "name": "fa-instagram"}, {"group": "brand", "name": "fa-ioxhost"}, {"group": "brand", "name": "fa-joomla"}, {"group": "brand", "name": "fa-jsfiddle"}, {"group": "brand", "name": "fa-lastfm"}, {"group": "brand", "name": "fa-lastfm-square"}, {"group": "brand", "name": "fa-linkedin"}, {"group": "brand", "name": "fa-linkedin-square"}, {"group": "brand", "name": "fa-linux"}, {"group": "brand", "name": "fa-maxcdn"}, {"group": "brand", "name": "fa-meanpath"}, {"group": "brand", "name": "fa-openid"}, {"group": "brand", "name": "fa-pagelines"}, {"group": "brand", "name": "fa-paypal"}, {"group": "brand", "name": "fa-pied-piper"}, {"group": "brand", "name": "fa-pied-piper-alt"}, {"group": "brand", "name": "fa-pinterest"}, {"group": "brand", "name": "fa-pinterest-square"}, {"group": "brand", "name": "fa-qq"}, {"group": "brand", "name": "fa-ra"}, {"group": "brand", "name": "fa-rebel"}, {"group": "brand", "name": "fa-reddit"}, {"group": "brand", "name": "fa-reddit-square"}, {"group": "brand", "name": "fa-renren"}, {"group": "brand", "name": "fa-share-alt"}, {"group": "brand", "name": "fa-share-alt-square"}, {"group": "brand", "name": "fa-skype"}, {"group": "brand", "name": "fa-slack"}, {"group": "brand", "name": "fa-slideshare"}, {"group": "brand", "name": "fa-soundcloud"}, {"group": "brand", "name": "fa-spotify"}, {"group": "brand", "name": "fa-stack-exchange"}, {"group": "brand", "name": "fa-stack-overflow"}, {"group": "brand", "name": "fa-steam"}, {"group": "brand", "name": "fa-steam-square"}, {"group": "brand", "name": "fa-stumbleupon"}, {"group": "brand", "name": "fa-stumbleupon-circle"}, {"group": "brand", "name": "fa-tencent-weibo"}, {"group": "brand", "name": "fa-trello"}, {"group": "brand", "name": "fa-tumblr"}, {"group": "brand", "name": "fa-tumblr-square"}, {"group": "brand", "name": "fa-twitch"}, {"group": "brand", "name": "fa-twitter"}, {"group": "brand", "name": "fa-twitter-square"}, {"group": "brand", "name": "fa-vimeo-square"}, {"group": "brand", "name": "fa-vine"}, {"group": "brand", "name": "fa-vk"}, {"group": "brand", "name": "fa-wechat"}, {"group": "brand", "name": "fa-weibo"}, {"group": "brand", "name": "fa-weixin"}, {"group": "brand", "name": "fa-windows"}, {"group": "brand", "name": "fa-wordpress"}, {"group": "brand", "name": "fa-xing"}, {"group": "brand", "name": "fa-xing-square"}, {"group": "brand", "name": "fa-yahoo"}, {"group": "brand", "name": "fa-yelp"}, {"group": "brand", "name": "fa-youtube"}, {"group": "brand", "name": "fa-youtube-play"}, {"group": "brand", "name": "fa-youtube-square"}, {"group": "medical", "name": "fa-ambulance"}, {"group": "medical", "name": "fa-h-square"}, {"group": "medical", "name": "fa-hospital-o"}, {"group": "medical", "name": "fa-medkit"}, {"group": "medical", "name": "fa-plus-square"}, {"group": "medical", "name": "fa-stethoscope"}, {"group": "medical", "name": "fa-user-md"}, {"group": "medical", "name": "fa-wheelchair"}]
# Font Awesome IconFinder
##Links
- [bl.ocks](http://bl.ocks.org/chrisrzhou/4a41fe71b9be79ec1479)
- [plunker](http://embed.plnkr.co/1PJ3kq/preview)
##Description
- This is a quick AngularJS app that searches and filters for [Font Awesome] icons by name or by group to quickly explore icons of interest.
- Click on the font icon and the HTML `<i></i>` tags will be copied in the clipboard.
- This project uses a Python parser (shown below in the `<pre>` section to parse the HTML [source page](http://fortawesome.github.io/Font-Awesome/icons/).
##Files
- `index.html`: Displays a matrix of Font Awesome icon together with search filters executed using `ng-repeat` and `filter`.
- `app.js`: Main angular app file connecting the DOM view with Javascript variables. Loads the font icon data using the `IconFactory` as well as helper functions `getTag` and `clearFilters` to help link functionality of clipboard copying and search filter clearing in the app.
- `data.json`: Sample data that is parsed by the Python parser shown in `index.html`.
- `style.css`: stylesheet
##Notes
- A big help from `[ng-clip]`(https://github.com/asafdav/ng-clip), which helps handles the clipboard copying functionality in the code.
- Transition animation of search filtering is performed with `ngAnimate` module.
- `data.json` data is loaded from the output of the Python code provided in `index.html`.