Created
August 11, 2014 05:30
-
-
Save greenlikeorange/a726febda251048c0fff to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="ngApp"> | |
| <head> | |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <body ng-controller="MainCtrl"> | |
| <div class="row"> | |
| <div class="large-12"> | |
| <div class="large-8 large-offset-2"> | |
| <div class="row collapse"> | |
| <div class="small-2 columns"> | |
| <span class="prefix">Search</span> | |
| </div> | |
| <div class="small-10 columns"> | |
| <input type="text" placeholder="ICONS Name Search" ng-model="query"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="large-3 small-4 columns awfont" ng-repeat="icon in icons | filter: search"> | |
| <center> | |
| <h1 class='fa {{icon.cls}}'></h1><br> | |
| <p>{{icon.name}}</p> | |
| </center> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var names = ['automobile','bank','behance','behance-square','bomb','building','cab','car','child','circle-o-notch','circle-thin','codepen','cube','cubes','database','delicious','deviantart','digg','drupal','empire','envelope-square','fax','file-archive-o','file-audio-o','file-code-o','file-excel-o','file-image-o','file-movie-o','file-pdf-o','file-photo-o','file-picture-o','file-powerpoint-o','file-sound-o','file-video-o','file-word-o','file-zip-o','ge','git','git-square','google','graduation-cap','hacker-news','header','history','institution','joomla','jsfiddle','language','life-bouy','life-ring','life-saver','mortar-board','openid','paper-plane','paper-plane-o','paragraph','paw','pied-piper','pied-piper-alt','pied-piper-square','qq','ra','rebel','recycle','reddit','reddit-square','send','send-o','share-alt','share-alt-square','slack','sliders','soundcloud','space-shuttle','spoon','spotify','steam','steam-square','stumbleupon','stumbleupon-circle','support','taxi','tencent-weibo','tree','university','vine','wechat','weixin','wordpress','yahoo','adjust','anchor','archive','arrows','arrows-h','arrows-v','asterisk','automobile','ban','bank','bar-chart-o','barcode','bars','beer','bell','bell-o','bolt','bomb','book','bookmark','bookmark-o','briefcase','bug','building','building-o','bullhorn','bullseye','cab','calendar','calendar-o','camera','camera-retro','car','caret-square-o-down','caret-square-o-left','caret-square-o-right','caret-square-o-up','certificate','check','check-circle','check-circle-o','check-square','check-square-o','child','circle','circle-o','circle-o-notch','circle-thin','clock-o','cloud','cloud-download','cloud-upload','code','code-fork','coffee','cog','cogs','comment','comment-o','comments','comments-o','compass','credit-card','crop','crosshairs','cube','cubes','cutlery','dashboard','database','desktop','dot-circle-o','download','edit','ellipsis-h','ellipsis-v','envelope','envelope-o','envelope-square','eraser','exchange','exclamation','exclamation-circle','exclamation-triangle','external-link','external-link-square','eye','eye-slash','fax','female','fighter-jet','file-archive-o','file-audio-o','file-code-o','file-excel-o','file-image-o','file-movie-o','file-pdf-o','file-photo-o','file-picture-o','file-powerpoint-o','file-sound-o','file-video-o','file-word-o','file-zip-o','film','filter','fire','fire-extinguisher','flag','flag-checkered','flag-o','flash','flask','folder','folder-o','folder-open','folder-open-o','frown-o','gamepad','gavel','gear','gears','gift','glass','globe','graduation-cap','group','hdd-o','headphones','heart','heart-o','history','home','image','inbox','info','info-circle','institution','key','keyboard-o','language','laptop','leaf','legal','lemon-o','level-down','level-up','life-bouy','life-ring','life-saver','lightbulb-o','location-arrow','lock','magic','magnet','mail-forward','mail-reply','mail-reply-all','male','map-marker','meh-o','microphone','microphone-slash','minus','minus-circle','minus-square','minus-square-o','mobile','mobile-phone','money','moon-o','mortar-board','music','navicon','paper-plane','paper-plane-o','paw','pencil','pencil-square','pencil-square-o','phone','phone-square','photo','picture-o','plane','plus','plus-circle','plus-square','plus-square-o','power-off','print','puzzle-piece','qrcode','question','question-circle','quote-left','quote-right','random','recycle','refresh','reorder','reply','reply-all','retweet','road','rocket','rss','rss-square','search','search-minus','search-plus','send','send-o','share','share-alt','share-alt-square','share-square','share-square-o','shield','shopping-cart','sign-in','sign-out','signal','sitemap','sliders','smile-o','sort','sort-alpha-asc','sort-alpha-desc','sort-amount-asc','sort-amount-desc','sort-asc','sort-desc','sort-down','sort-numeric-asc','sort-numeric-desc','sort-up','space-shuttle','spinner','spoon','square','square-o','star','star-half','star-half-empty','star-half-full','star-half-o','star-o','suitcase','sun-o','support','tablet','tachometer','tag','tags','tasks','taxi','terminal','thumb-tack','thumbs-down','thumbs-o-down','thumbs-o-up','thumbs-up','ticket','times','times-circle','times-circle-o','tint','toggle-down','toggle-left','toggle-right','toggle-up','trash-o','tree','trophy','truck','umbrella','university','unlock','unlock-alt','unsorted','upload','user','users','video-camera','volume-down','volume-off','volume-up','warning','wheelchair','wrench','file','file-archive-o','file-audio-o','file-code-o','file-excel-o','file-image-o','file-movie-o','file-o','file-pdf-o','file-photo-o','file-picture-o','file-powerpoint-o','file-sound-o','file-text','file-text-o','file-video-o','file-word-o','file-zip-o','circle-o-notch','cog','gear','refresh','spinner','check-square','check-square-o','circle','circle-o','dot-circle-o','minus-square','minus-square-o','plus-square','plus-square-o','square','square-o','bitcoin','btc','cny','dollar','eur','euro','gbp','inr','jpy','krw','money','rmb','rouble','rub','ruble','rupee','try','turkish-lira','usd','won','yen','align-center','align-justify','align-left','align-right','bold','chain','chain-broken','clipboard','columns','copy','cut','dedent','eraser','file','file-o','file-text','file-text-o','files-o','floppy-o','font','header','indent','italic','link','list','list-alt','list-ol','list-ul','outdent','paperclip','paragraph','paste','repeat','rotate-left','rotate-right','save','scissors','strikethrough','subscript','superscript','table','text-height','text-width','th','th-large','th-list','underline','undo','unlink','angle-double-down','angle-double-left','angle-double-right','angle-double-up','angle-down','angle-left','angle-right','angle-up','arrow-circle-down','arrow-circle-left','arrow-circle-o-down','arrow-circle-o-left','arrow-circle-o-right','arrow-circle-o-up','arrow-circle-right','arrow-circle-up','arrow-down','arrow-left','arrow-right','arrow-up','arrows','arrows-alt','arrows-h','arrows-v','caret-down','caret-left','caret-right','caret-square-o-down','caret-square-o-left','caret-square-o-right','caret-square-o-up','caret-up','chevron-circle-down','chevron-circle-left','chevron-circle-right','chevron-circle-up','chevron-down','chevron-left','chevron-right','chevron-up','hand-o-down','hand-o-left','hand-o-right','hand-o-up','long-arrow-down','long-arrow-left','long-arrow-right','long-arrow-up','toggle-down','toggle-left','toggle-right','toggle-up','arrows-alt','backward','compress','eject','expand','fast-backward','fast-forward','forward','pause','play','play-circle','play-circle-o','step-backward','step-forward','stop','youtube-play','adn','android','apple','behance','behance-square','bitbucket','bitbucket-square','bitcoin','btc','codepen','css3','delicious','deviantart','digg','dribbble','dropbox','drupal','empire','facebook','facebook-square','flickr','foursquare','ge','git','git-square','github','github-alt','github-square','gittip','google','google-plus','google-plus-square','hacker-news','html5','instagram','joomla','jsfiddle','linkedin','linkedin-square','linux','maxcdn','openid','pagelines','pied-piper','pied-piper-alt','pied-piper-square','pinterest','pinterest-square','qq','ra','rebel','reddit','reddit-square','renren','share-alt','share-alt-square','skype','slack','soundcloud','spotify','stack-exchange','stack-overflow','steam','steam-square','stumbleupon','stumbleupon-circle','tencent-weibo','trello','tumblr','tumblr-square','twitter','twitter-square','vimeo-square','vine','vk','wechat','weibo','weixin','windows','wordpress','xing','xing-square','yahoo','youtube','youtube-play','youtube-square','ambulance','h-square','hospital-o','medkit','plus-square','stethoscope','user-md','wheelchair']; | |
| var icons = []; | |
| names.forEach(function(n,i,a){ | |
| icons.push({cls: "fa-"+n, name: n}); | |
| }); | |
| var app = angular.module('ngApp', []); | |
| app.controller('MainCtrl', ['$scope', function ($scope) { | |
| 'use strict'; | |
| $scope.icons = icons; | |
| $scope.search = function (row) { | |
| if( !$scope.query ) return true; | |
| var splited = $scope.query.split(' ').join('|'); | |
| return !!(row.name.match(new RegExp(splited))); | |
| }; | |
| }]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment