Added feedback message when query returns no results.

src/_includes/icons/filter.html

@@ -20,5 +20,9 @@
     </div>
     {% endfor %}
   </div>
+  <div id="no-search-results">
+    <div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> No icons with the tag <strong>'<span></span>'</strong> were found.</div>
+    <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle"></i> Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
+  </div>
 
 </{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>

src/assets/js/site.js

@@ -10,6 +10,7 @@ $(function() {
     var $filter = $('#filter');
     var $other = $('#new, #web-application, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart');
     var $clear = $('#filter-clear');
+    var $no_results = $('#no-search-results');
 
     var $icons = $('.filter-icon', $filter);
 
@@ -29,10 +30,21 @@ $(function() {
 
       if(!val) return;
 
+      var resultsCount = 0;
       $icons.each(function() {
         var show = $(this).attr('data-filter').match(' '+val);
+        if( show ) resultsCount++;
         $(this).toggle(!!show);
       });
+
+      console.log(resultsCount);
+
+      if( resultsCount == 0 && val.length != 0 ) {
+        $no_results.find('span').text(val);
+        $no_results.show();
+      } else {
+        $no_results.hide();
+      }
     }).trigger('keyup');
   }
 

src/assets/less/site/lazy.less

@@ -84,3 +84,7 @@
 .text-strike { text-decoration: line-through; }
 .text-upper { text-transform: uppercase; }
 .text-lower { text-transform: lowercase; }
+
+#no-search-results {
+  display: none;
+}