Add search filter for quickly finding icons (because I'm lazy and tired of searching them manually). http://screencast.com/t/MhpzzMjE

I didn't have a way to compile site.css since I can't run a Makefile. I just added the CSS tags manually so they would run. But they are in less and will build the next time you compile it.

assets/js/site.js

@@ -1,11 +1,40 @@
-$(function() {
+jQuery(function($) {
   // start the icon carousel
   $('#iconCarousel').carousel({
     interval: 5000
   });
 
 
+   // filter icons when search entered
+   $('#filterBoxText').on({'keyup': filter, change: filter});
+   $('#filterBoxIcon').on('click', function() {
+      $('#filterBoxText').val('').triggerHandler('change');
+   });
 
+   function filter() {
+      var $iconCells = $('.the-icons .span3');
+      var text = $('#filterBoxText').val();
+      var hasText = !!text;
+
+      $('#new,h2').toggle(!hasText);
+      $('#filterBoxIcon')
+         .prop('disabled', !hasText)
+         .find('i')
+         .toggleClass('icon-search', !hasText)
+         .toggleClass('icon-remove', hasText);
+
+      $('div.lists-of-icons').toggleClass('search-active', hasText);
+
+      if( hasText ) {
+         $iconCells.hide().filter(function() {
+            return !!$(this).text().match(text);
+         }).show();
+      }
+      else {
+         $iconCells.show();
+      }
+   }
+   filter();
 
   // make code pretty
 //  $('pre').addClass('prettyprint');

assets/less/site.less

@@ -349,4 +349,35 @@ footer {
   &.dropdown-split-left > a { padding-right: 0; }
 }
 
+.filter-box-for-icons {
+  background-color: @grayLighter;
+  border-bottom: 1px solid #DDDDDD;
+  border-top: 1px solid #DDDDDD;
+  padding: 15px 0 5px;
+  text-align: center;
+}
+
+.filter-box-for-icons h3 {
+  display: inline-block;
+  margin: 0 20px 0 0;
+  line-height: 40px;
+}
+
+.filter-box-for-icons .input-append input {
+  font-size: 28px;
+  height: 30px;
+}
+
+.filter-box-for-icons .input-append button {
+  font-size: 28px;
+  height: 40px;
+}
+
+#filterBoxIcon .icon-remove { color: @redDark; }
+
+div.lists-of-icons.search-active section,
+div.lists-of-icons.search-active .the-icons {
+  margin: 0;
+}
+
 @import "responsive.less";

icons/index.html

@@ -147,7 +147,6 @@
   </div>
 </div>
 
-
 <div class="container">
   
 <section class="hidden-print">
@@ -169,6 +168,17 @@
   </div>
 </section>
 
+</div>
+
+<div class="filter-box-for-icons">
+    <h3>Filter Icons: </h3>
+    <div class="input-append">
+        <input class="input-xlarge" type="text" id="filterBoxText" />
+        <button id="filterBoxIcon" class="btn" type="button"><i class="icon-search"></i></button>
+    </div>
+</div>
+
+<div class="container lists-of-icons">
 
 <div id="new">
   <h2 class="page-header">New Icons in 3.2</h2>