Font Awesome icon finder

Quick utility to filter the list of the icons!

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/site.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css">
<div>
    <h1>Font Awesome Icon Finder</h1>
    <p class="fineprint">
        Updated 4 Jun 2013, v3.1.1 compatible.
    </p>
    <p>
        Type in text (which can match inside a classname!) and relevant icon names will be shown. Separate multiple queries with spaces.
    </p>
    <p class="searcher">
        icon-<input type="text" class="searchfield" />
    </p>
</div>

<ul class="the-icons">
<li><i class="icon-sort"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li>
<li><i class="icon-envelope"></i> icon-envelope</li>
<li><i class="icon-heart"></i> icon-heart</li>
<li><i class="icon-star"></i> icon-star</li>
<li><i class="icon-star-empty"></i> icon-star-empty</li>
<li><i class="icon-user"></i> icon-user</li>
<li><i class="icon-film"></i> icon-film</li>
<li><i class="icon-th-large"></i> icon-th-large</li>
<li><i class="icon-th"></i> icon-th</li>
<li><i class="icon-th-list"></i> icon-th-list</li>
<li><i class="icon-ok"></i> icon-ok</li>
<li><i class="icon-remove"></i> icon-remove</li>
<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
<li><i class="icon-off"></i> icon-off</li>
<li><i class="icon-signal"></i> icon-signal</li>
<li><i class="icon-cog"></i> icon-cog</li>
<li><i class="icon-trash"></i> icon-trash</li>
<li><i class="icon-home"></i> icon-home</li>
<li><i class="icon-file"></i> icon-file</li>
<li><i class="icon-time"></i> icon-time</li>
<li><i class="icon-road"></i> icon-road</li>
<li><i class="icon-download-alt"></i> icon-download-alt</li>
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="icon-play-circle"></i>...

CSS

body {
    font-family: sans-serif;
    padding: 20px;
}
h1 {
    font-weight: bold;
    margin-bottom: 0;
}
h3 {
    font-weight: bold;
    margin: 30px 0px 10px;
    clear:both;
}
.clear {
    clear:both;
}
div {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;
}
p {
    margin: 5px 0;
}
li {
    float: left;
    width: 200px;
}
.fineprint {
    font-size: 0.7em;
    color: #aaa;
}
.searcher {
    margin-top: 20px;
}
.searcher, .searcher input{
    font-family: monospace;
    font-weight: bold;
    line-height: 30px;
    font-size: 20px;
}

JavaScript

$(function(){
    var $field = $(".searchfield"),
        $i =$('i');
    
    function update() {
    var val = $.trim(''+$field.val()).toLowerCase(),
        vals = $.map(val.split(/\s+/), function(v) {return $.trim(v).replace(/\W/g, '');});
    if (val==='') {
        // Reenable all.
        $i.parent().show();
    } else {
        // Filter! :)
        $i.each(function(idx, el) {
            var normalized_class_name = el.className.replace(/^icon\-/, '').replace(/\W/g, ''),
                show = false;
            $.each(vals, function(i, v) {
                if(v !== '' && normalized_class_name.indexOf(v) >= 0) {
                    show = true;
                }
            });
            $(el).parent().toggle(show);
        });         
    }
    }
    
    $field.on("keyup change", update);
});