How to bind events on font awesome icons?

问题

I want to bind the click event on a font awesome icon. Yet the icon itself is not clickable, only when I insert additional text, that text becomes bound.

How do I bind the icon itself?

<span class="icon-star">
    only this text is clickable, the icon itself is not
</span>

<script type="text/javascript">
(function($) {
    $('span.icon-star').on('click', function() {
        console.log($(this));
    });
})(jQuery);
</script>

回答1:

As discussed above, giving the span a block or inline-block layout will fix the issue. As to why this happens with non-standard fonts, I'm not entirely sure, but it could be due to the fact that the browser doesn't recognise the character and therefore assumes the span tag is empty, thus collapsing it to 0 width and height.

回答2:

Here is another solution I used which seems to answer the question more clearly, binding just the icon, no other text needed. Just wrap it in a span where you set the id. Here is an example:

<span id="menuOpen">
  <i class="fa fa-navicon"></i>
</span> 

 $("#menuOpen").click(showMenu);

Hope that can help someone out.

回答3:

Another solution is to write onClick directly into i tag as this:

<i class="fa fa-navicon" onClick="functionName()"></i>

Yes, after hours testing, above solution got things done, and then I know that may be awesome icon issue, and a search brought me here.

来源：https://stackoverflow.com/questions/12355180/how-to-bind-events-on-font-awesome-icons