title: How to bind events on font awesome icons?
body: <p>I want to bind the <code>click</code> event on a font awesome icon. Yet the icon itself is not clickable, only when I insert additional text, that text becomes bound.</p>
  
  <p>How do I bind the icon itself? </p>
  
  <pre><code>&lt;span class="icon-star"&gt;
      only this text is clickable, the icon itself is not
  &lt;/span&gt;
  
  &lt;script type="text/javascript"&gt;
  (function($) {
      $('span.icon-star').on('click', function() {
          console.log($(this));
      });
  })(jQuery);
  &lt;/script&gt;
  </code></pre>