Font Awesome IconFinder

README.md

Font Awesome IconFinder

bl.ocks.org link

This is a quick and fun AngularJS app that searches and filters for Font Awesome icons by name or by group.

---

Files

• index.html: Displays a matrix of Font Awesome icon together with search filters using ng-repeat and filter.

• app.js: Main angular app. Loads the font icon data using the IconFactory.

• data.json: Sample data that is parsed by the Python parser shown in index.html.

• style.css: stylesheet

---

Other Notes

• 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 Font Awesome icon source.
• A big help from ng-clip, which helps handles the clipboard copying in the project.
• 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.

app.js

(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;
        });
      }
    };
  }
})();

data.json

[{"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"}]

index.html

<!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/">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-cubes"></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>

parser.py

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))

style.css

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; }

thumbnail.png