How to bind events on font awesome icons?

Question

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>

Answer 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.