如何绑定字体真棒图标上的事件？ [英] 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.

如何绑定图标本身？

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

推荐答案

如上所述，给出范围 block 或 inline-block 布局将解决问题。至于为什么会出现非标准字体，我不完全确定，但可能是因为浏览器无法识别该字符，因此假设 span 标签为空，因此将其折叠为0宽度和高度。

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.

这篇关于如何绑定字体真棒图标上的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！