A Pen by LukyVJ.

Icons-finder-(v1).markdown

Icons finder (v1)

Because I love Weloveiconfonts.com by @TimPietrusky

A Pen by LukyVJ on CodePen.

License.

index.html

<div id="search">
  <input type="text" id="txt_search" name="search"  placeholder="search an icon..">
</div>
   <section data-name="preview" data-cols="1" data-valign="center">
<div> 
   <ul >
      <li class="entypo-note" data-text="note"></li>
      <li class="entypo-note-beamed" data-text="note-beamed"></li>
      <li class="entypo-music" data-text="music"></li>
      <li class="entypo-search" data-text="search"></li>
      <li class="entypo-flashlight" data-text="flashlight"></li>
      <li class="entypo-mail" data-text="mail"></li>
      <li class="entypo-heart" data-text="heart"></li>
      <li class="entypo-heart-empty" data-text="heart-empty"></li>
      <li class="entypo-star" data-text="star"></li>
      <li class="entypo-star-empty" data-text="star-empty"></li>
      <li class="entypo-user" data-text="user"></li>
      <li class="entypo-users" data-text="users"></li>
      <li class="entypo-user-add" data-text="user-add"></li>
      <li class="entypo-video" data-text="video"></li>
      <li class="entypo-picture" data-text="picture"></li>
      <li class="entypo-camera" data-text="camera"></li>
      <li class="entypo-layout" data-text="layout"></li>
      <li class="entypo-menu" data-text="menu"></li>
      <li class="entypo-check" data-text="check"></li>
      <li class="entypo-cancel" data-text="cancel"></li>
      <li class="entypo-cancel-circled" data-text="cancel-circled"></li>
      <li class="entypo-cancel-squared" data-text="cancel-squared"></li>
      <li class="entypo-plus" data-text="plus"></li>
      <li class="entypo-plus-circled" data-text="plus-circled"></li>
      <li class="entypo-plus-squared" data-text="plus-squared"></li>
      <li class="entypo-minus" data-text="minus"></li>
      <li class="entypo-minus-circled" data-text="minus-circled"></li>
      <li class="entypo-minus-squared" data-text="minus-squared"></li>
      <li class="entypo-help" data-text="help"></li>
      <li class="entypo-help-circled" data-text="help-circled"></li>
      <li class="entypo-info" data-text="info"></li>
      <li class="entypo-info-circled" data-text="info-circled"></li>
      <li class="entypo-back" data-text="back"></li>
      <li class="entypo-home" data-text="home"></li>
      <li class="entypo-link" data-text="link"></li>
      <li class="entypo-attach" data-text="attach"></li>
      <li class="entypo-lock" data-text="lock"></li>
      <li class="entypo-lock-open" data-text="lock-open"></li>
      <li class="entypo-eye" data-text="eye"></li>
      <li class="entypo-tag" data-text="tag"></li>
      <li class="entypo-bookmark" data-text="bookmark"></li>
      <li class="entypo-bookmarks" data-text="bookmarks"></li>
      <li class="entypo-flag" data-text="flag"></li>
      <li class="entypo-thumbs-up" data-text="thumbs-up"></li>
      <li class="entypo-thumbs-down" data-text="thumbs-down"></li>
      <li class="entypo-download" data-text="download"></li>
      <li class="entypo-upload" data-text="upload"></li>
      <li class="entypo-upload-cloud" data-text="upload-cloud"></li>
      <li class="entypo-reply" data-text="reply"></li>
      <li class="entypo-reply-all" data-text="reply-all"></li>
      <li class="entypo-forward" data-text="forward"></li>
      <li class="entypo-quote" data-text="quote"></li>
      <li class="entypo-code" data-text="code"></li>
      <li class="entypo-export" data-text="export"></li>
      <li class="entypo-pencil" data-text="pencil"></li>
      <li class="entypo-feather" data-text="feather"></li>
      <li class="entypo-print" data-text="print"></li>
      <li class="entypo-retweet" data-text="retweet"></li>
      <li class="entypo-keyboard" data-text="keyboard"></li>
      <li class="entypo-comment" data-text="comment"></li>
      <li class="entypo-chat" data-text="chat"></li>
      <li class="entypo-bell" data-text="bell"></li>
      <li class="entypo-attention" data-text="attention"></li>
      <li class="entypo-alert" data-text="alert"></li>
      <li class="entypo-vcard" data-text="vcard"></li>
      <li class="entypo-address" data-text="address"></li>
      <li class="entypo-location" data-text="location"></li>
      <li class="entypo-map" data-text="map"></li>
      <li class="entypo-direction" data-text="direction"></li>
      <li class="entypo-compass" data-text="compass"></li>
      <li class="entypo-cup" data-text="cup"></li>
      <li class="entypo-trash" data-text="trash"></li>
      <li class="entypo-doc" data-text="doc"></li>
      <li class="entypo-docs" data-text="docs"></li>
      <li class="entypo-doc-landscape" data-text="doc-landscape"></li>
      <li class="entypo-doc-text" data-text="doc-text"></li>
      <li class="entypo-doc-text-inv" data-text="doc-text-inv"></li>
      <li class="entypo-newspaper" data-text="newspaper"></li>
      <li class="entypo-book-open" data-text="book-open"></li>
      <li class="entypo-book" data-text="book"></li>
      <li class="entypo-folder" data-text="folder"></li>
      <li class="entypo-archive" data-text="archive"></li>
      <li class="entypo-box" data-text="box"></li>
      <li class="entypo-rss" data-text="rss"></li>
      <li class="entypo-phone" data-text="phone"></li>
      <li class="entypo-cog" data-text="cog"></li>
      <li class="entypo-tools" data-text="tools"></li>
      <li class="entypo-share" data-text="share"></li>
      <li class="entypo-shareable" data-text="shareable"></li>
      <li class="entypo-basket" data-text="basket"></li>
      <li class="entypo-bag" data-text="bag"></li>
      <li class="entypo-calendar" data-text="calendar"></li>
      <li class="entypo-login" data-text="login"></li>
      <li class="entypo-logout" data-text="logout"></li>
      <li class="entypo-mic" data-text="mic"></li>
      <li class="entypo-mute" data-text="mute"></li>
      <li class="entypo-sound" data-text="sound"></li>
      <li class="entypo-volume" data-text="volume"></li>
      <li class="entypo-clock" data-text="clock"></li>
      <li class="entypo-hourglass" data-text="hourglass"></li>
      <li class="entypo-lamp" data-text="lamp"></li>
      <li class="entypo-light-down" data-text="light-down"></li>
      <li class="entypo-light-up" data-text="light-up"></li>
      <li class="entypo-adjust" data-text="adjust"></li>
      <li class="entypo-block" data-text="block"></li>
      <li class="entypo-resize-full" data-text="resize-full"></li>
      <li class="entypo-resize-small" data-text="resize-small"></li>
      <li class="entypo-popup" data-text="popup"></li>
      <li class="entypo-publish" data-text="publish"></li>
      <li class="entypo-window" data-text="window"></li>
      <li class="entypo-arrow-combo" data-text="arrow-combo"></li>
      <li class="entypo-down-circled" data-text="down-circled"></li>
      <li class="entypo-left-circled" data-text="left-circled"></li>
      <li class="entypo-right-circled" data-text="right-circled"></li>
      <li class="entypo-up-circled" data-text="up-circled"></li>
      <li class="entypo-down-open" data-text="down-open"></li>
      <li class="entypo-left-open" data-text="left-open"></li>
      <li class="entypo-right-open" data-text="right-open"></li>
      <li class="entypo-up-open" data-text="up-open"></li>
      <li class="entypo-down-open-mini" data-text="down-open-mini"></li>
      <li class="entypo-left-open-mini" data-text="left-open-mini"></li>
      <li class="entypo-right-open-mini" data-text="right-open-mini"></li>
      <li class="entypo-up-open-mini" data-text="up-open-mini"></li>
      <li class="entypo-down-open-big" data-text="down-open-big"></li>
      <li class="entypo-left-open-big" data-text="left-open-big"></li>
      <li class="entypo-right-open-big" data-text="right-open-big"></li>
      <li class="entypo-up-open-big" data-text="up-open-big"></li>
      <li class="entypo-down" data-text="down"></li>
      <li class="entypo-left" data-text="left"></li>
      <li class="entypo-right" data-text="right"></li>
      <li class="entypo-up" data-text="up"></li>
      <li class="entypo-down-dir" data-text="down-dir"></li>
      <li class="entypo-left-dir" data-text="left-dir"></li>
      <li class="entypo-right-dir" data-text="right-dir"></li>
      <li class="entypo-up-dir" data-text="up-dir"></li>
      <li class="entypo-down-bold" data-text="down-bold"></li>
      <li class="entypo-left-bold" data-text="left-bold"></li>
      <li class="entypo-right-bold" data-text="right-bold"></li>
      <li class="entypo-up-bold" data-text="up-bold"></li>
      <li class="entypo-down-thin" data-text="down-thin"></li>
      <li class="entypo-left-thin" data-text="left-thin"></li>
      <li class="entypo-right-thin" data-text="right-thin"></li>
      <li class="entypo-up-thin" data-text="up-thin"></li>
      <li class="entypo-ccw" data-text="ccw"></li>
      <li class="entypo-cw" data-text="cw"></li>
      <li class="entypo-arrows-ccw" data-text="arrows-ccw"></li>
      <li class="entypo-level-down" data-text="level-down"></li>
      <li class="entypo-level-up" data-text="level-up"></li>
      <li class="entypo-shuffle" data-text="shuffle"></li>
      <li class="entypo-loop" data-text="loop"></li>
      <li class="entypo-switch" data-text="switch"></li>
      <li class="entypo-play" data-text="play"></li>
      <li class="entypo-stop" data-text="stop"></li>
      <li class="entypo-pause" data-text="pause"></li>
      <li class="entypo-record" data-text="record"></li>
      <li class="entypo-to-end" data-text="to-end"></li>
      <li class="entypo-to-start" data-text="to-start"></li>
      <li class="entypo-fast-forward" data-text="fast-forward"></li>
      <li class="entypo-fast-backward" data-text="fast-backward"></li>
      <li class="entypo-progress-0" data-text="progress-0"></li>
      <li class="entypo-progress-1" data-text="progress-1"></li>
      <li class="entypo-progress-2" data-text="progress-2"></li>
      <li class="entypo-progress-3" data-text="progress-3"></li>
      <li class="entypo-target" data-text="target"></li>
      <li class="entypo-palette" data-text="palette"></li>
      <li class="entypo-list" data-text="list"></li>
      <li class="entypo-list-add" data-text="list-add"></li>
      <li class="entypo-signal" data-text="signal"></li>
      <li class="entypo-trophy" data-text="trophy"></li>
      <li class="entypo-battery" data-text="battery"></li>
      <li class="entypo-back-in-time" data-text="back-in-time"></li>
      <li class="entypo-monitor" data-text="monitor"></li>
      <li class="entypo-mobile" data-text="mobile"></li>
      <li class="entypo-network" data-text="network"></li>
      <li class="entypo-cd" data-text="cd"></li>
      <li class="entypo-inbox" data-text="inbox"></li>
      <li class="entypo-install" data-text="install"></li>
      <li class="entypo-globe" data-text="globe"></li>
      <li class="entypo-cloud" data-text="cloud"></li>
      <li class="entypo-cloud-thunder" data-text="cloud-thunder"></li>
      <li class="entypo-flash" data-text="flash"></li>
      <li class="entypo-moon" data-text="moon"></li>
      <li class="entypo-flight" data-text="flight"></li>
      <li class="entypo-paper-plane" data-text="paper-plane"></li>
      <li class="entypo-leaf" data-text="leaf"></li>
      <li class="entypo-lifebuoy" data-text="lifebuoy"></li>
      <li class="entypo-mouse" data-text="mouse"></li>
      <li class="entypo-briefcase" data-text="briefcase"></li>
      <li class="entypo-suitcase" data-text="suitcase"></li>
      <li class="entypo-dot" data-text="dot"></li>
      <li class="entypo-dot-2" data-text="dot-2"></li>
      <li class="entypo-dot-3" data-text="dot-3"></li>
      <li class="entypo-brush" data-text="brush"></li>
      <li class="entypo-magnet" data-text="magnet"></li>
      <li class="entypo-infinity" data-text="infinity"></li>
      <li class="entypo-erase" data-text="erase"></li>
      <li class="entypo-chart-pie" data-text="chart-pie"></li>
      <li class="entypo-chart-line" data-text="chart-line"></li>
      <li class="entypo-chart-bar" data-text="chart-bar"></li>
      <li class="entypo-chart-area" data-text="chart-area"></li>
      <li class="entypo-tape" data-text="tape"></li>
      <li class="entypo-graduation-cap" data-text="graduation-cap"></li>
      <li class="entypo-language" data-text="language"></li>
      <li class="entypo-ticket" data-text="ticket"></li>
      <li class="entypo-water" data-text="water"></li>
      <li class="entypo-droplet" data-text="droplet"></li>
      <li class="entypo-air" data-text="air"></li>
      <li class="entypo-credit-card" data-text="credit-card"></li>
      <li class="entypo-floppy" data-text="floppy"></li>
      <li class="entypo-clipboard" data-text="clipboard"></li>
      <li class="entypo-megaphone" data-text="megaphone"></li>
      <li class="entypo-database" data-text="database"></li>
      <li class="entypo-drive" data-text="drive"></li>
      <li class="entypo-bucket" data-text="bucket"></li>
      <li class="entypo-thermometer" data-text="thermometer"></li>
      <li class="entypo-key" data-text="key"></li>
      <li class="entypo-flow-cascade" data-text="flow-cascade"></li>
      <li class="entypo-flow-branch" data-text="flow-branch"></li>
      <li class="entypo-flow-tree" data-text="flow-tree"></li>
      <li class="entypo-flow-line" data-text="flow-line"></li>
      <li class="entypo-flow-parallel" data-text="flow-parallel"></li>
      <li class="entypo-rocket" data-text="rocket"></li>
      <li class="entypo-gauge" data-text="gauge"></li>
      <li class="entypo-traffic-cone" data-text="traffic-cone"></li>
      <li class="entypo-cc" data-text="cc"></li>
      <li class="entypo-cc-by" data-text="cc-by"></li>
      <li class="entypo-cc-nc" data-text="cc-nc"></li>
      <li class="entypo-cc-nc-eu" data-text="cc-nc-eu"></li>
      <li class="entypo-cc-nc-jp" data-text="cc-nc-jp"></li>
      <li class="entypo-cc-sa" data-text="cc-sa"></li>
      <li class="entypo-cc-nd" data-text="cc-nd"></li>
      <li class="entypo-cc-pd" data-text="cc-pd"></li>
      <li class="entypo-cc-zero" data-text="cc-zero"></li>
      <li class="entypo-cc-share" data-text="cc-share"></li>
      <li class="entypo-cc-remix" data-text="cc-remix"></li>
      <li class="entypo-github" data-text="github"></li>
      <li class="entypo-github-circled" data-text="github-circled"></li>
      <li class="entypo-flickr" data-text="flickr"></li>
      <li class="entypo-flickr-circled" data-text="flickr-circled"></li>
      <li class="entypo-vimeo" data-text="vimeo"></li>
      <li class="entypo-vimeo-circled" data-text="vimeo-circled"></li>
      <li class="entypo-twitter" data-text="twitter"></li>
      <li class="entypo-twitter-circled" data-text="twitter-circled"></li>
      <li class="entypo-facebook" data-text="facebook"></li>
      <li class="entypo-facebook-circled" data-text="facebook-circled"></li>
      <li class="entypo-facebook-squared" data-text="facebook-squared"></li>
      <li class="entypo-gplus" data-text="gplus"></li>
      <li class="entypo-gplus-circled" data-text="gplus-circled"></li>
      <li class="entypo-pinterest" data-text="pinterest"></li>
      <li class="entypo-pinterest-circled" data-text="pinterest-circled"></li>
      <li class="entypo-tumblr" data-text="tumblr"></li>
      <li class="entypo-tumblr-circled" data-text="tumblr-circled"></li>
      <li class="entypo-linkedin" data-text="linkedin"></li>
      <li class="entypo-linkedin-circled" data-text="linkedin-circled"></li>
      <li class="entypo-dribbble" data-text="dribbble"></li>
      <li class="entypo-dribbble-circled" data-text="dribbble-circled"></li>
      <li class="entypo-stumbleupon" data-text="stumbleupon"></li>
      <li class="entypo-stumbleupon-circled" data-text="stumbleupon-circled"></li>
      <li class="entypo-lastfm" data-text="lastfm"></li>
      <li class="entypo-lastfm-circled" data-text="lastfm-circled"></li>
      <li class="entypo-rdio" data-text="rdio"></li>
      <li class="entypo-rdio-circled" data-text="rdio-circled"></li>
      <li class="entypo-spotify" data-text="spotify"></li>
      <li class="entypo-spotify-circled" data-text="spotify-circled"></li>
      <li class="entypo-qq" data-text="qq"></li>
      <li class="entypo-instagrem" data-text="instagrem"></li>
      <li class="entypo-dropbox" data-text="dropbox"></li>
      <li class="entypo-evernote" data-text="evernote"></li>
      <li class="entypo-flattr" data-text="flattr"></li>
      <li class="entypo-skype" data-text="skype"></li>
      <li class="entypo-skype-circled" data-text="skype-circled"></li>
      <li class="entypo-renren" data-text="renren"></li>
      <li class="entypo-sina-weibo" data-text="sina-weibo"></li>
      <li class="entypo-paypal" data-text="paypal"></li>
      <li class="entypo-picasa" data-text="picasa"></li>
      <li class="entypo-soundcloud" data-text="soundcloud"></li>
      <li class="entypo-mixi" data-text="mixi"></li>
      <li class="entypo-behance" data-text="behance"></li>
      <li class="entypo-google-circles" data-text="google-circles"></li>
      <li class="entypo-vkontakte" data-text="vkontakte"></li>
      <li class="entypo-smashing" data-text="smashing"></li>
      <li class="entypo-sweden" data-text="sweden"></li>
      <li class="entypo-db-shape" data-text="db-shape"></li>
      <li class="entypo-logo-db" data-text="logo-db"></li>
   </ul>
</div>
        <div id="res"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

script.js

$(document).ready(function(){
  var input = $('#txt_search');
    input.keyup(function() {
     
      // Define variables 
      var value = $("#txt_search").val(),
          icon = $("ul li"),
          deck = $('ul'),
          result = $("#res"),
          item1 = $('.entypo-' + value)[0],
          victory = deck.has(item1);
     
     // Add valid class to the icon
     $('.entypo-' + value).addClass('valid');
     
    // If the icon exists show result 
    if(victory){
          result.html('<li class="res entypo-'+ value +'"></li>' + ' class="entypo-' + value + '"').css('font-family','courier');
      }
      // If the value of the search input is empty, remove result
      if( !value ) {
         result.empty();
        $('li').removeClass('valid');
      }
      // If the icon does not exist don't display anything.
      if( !item1) {
         result.empty();
      }
      
    });
  
  $('ul li').on('click',function(){
   var myClass = $(this).attr("class"),
       result = $("#res");
    result.html('<li class="res '+ myClass +'"></li>' + ' class="' + myClass + '"').css('font-family','courier');
  });

});

style.css

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=PT+Mono);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/**/
*{
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
ul{
  display:block;
  margin:0;
  padding:0;
  width:90%;
  margin:10% 5%;
}
ul li,li{
  display:block;
  float:left;
  width:1.5em;
  height:1.5em;
  font-size:.8em;
  margin:.5em;
  text-align:center;
}
ul li:hover{
  background: #3498db;
  color: #fff;
  padding: .2em;
}
/**/
#search{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:66px;
  background:#3498db;
  font-family:PT Mono;
}
#search input{
  display:block;
  width:90%;
  height:60%;
  margin:1% 5%;
  appearance:none;
  border:0;
  border-bottom:.1em solid #fff;
  background:#3498db;
  font-size:2em;
  color:#fff;
  outline:0;
}
::-webkit-input-placeholder {
color:#fff;
}

:-moz-placeholder { /* Firefox 18- */
color:#fff;
}

::-moz-placeholder {  /* Firefox 19+ */
color:#fff;
}

:-ms-input-placeholder {  
color:#fff;
}

#res{position:absolute;bottom:10%;left:5%;
  background:#3498db;
  color:#fff;
  font-size:2em;
  padding:.5em;
width:auto;
height:60px;
overflow:hidden;
line-height:.8;}

.res{
  display:block;
  width:1.8em;
  height:100%;
  background:#2980b9;
  margin:-.62em;
  padding:.5em;
  text-align:center;
  margin-right:1em;
  height:4em;
  font-size:1.2em;
  line-height:1;
  font-family:courier !important;
}

/* Classes */
.valid{
  background: #3498db;
        color: #fff;
        padding: .2em;
}