jquery - 如何在字体很棒的图标上绑定(bind)事件？

Question

我想在 font Awesome 图标上绑定(bind) click 事件。然而图标本身是不可点击的，只有当我插入额外的文本时，该文本才会被绑定(bind)。

如何绑定(bind)图标本身？

<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

如上所述，为跨度提供 block 或 inline-block 布局将解决该问题。至于为什么非标准字体会发生这种情况，我不完全确定，但这可能是由于浏览器无法识别该字符，因此假设 span 标记为空，从而将其折叠为 0 宽度和高度。