我使用的是 Font-Awesome,它是用于 Twitter Bootstrap 的标志性字体。
标记 -
<i class="icon-remove reset-preference-button"></i>
CSS -
.reset-preference-button {
cursor: pointer;
}
JavaScript-
$(".reset-preference-button").on("click", function() {
// ... do something
});
当我呈现页面时,当鼠标悬停在元素上时,光标不会变为指针。当我点击图标时也没有任何反应。在绑定(bind)事件之前,我确保图标存在。
请注意,我使用的是 element 而不是其他任何东西。似乎当我将此元素的样式显式设置为 "display: inline-block;"
时效果很好。
根据我的测试,这只发生在 Chrome 上。在 Firefox 和 IE 中运行良好。我当前的 Chrome 版本是 18,但它也会影响其他版本。
我已经在 https://github.com/FortAwesome/Font-Awesome/issues/157 提交了错误
最佳答案
发生这种情况是因为 <i>
中没有任何内容element - font awesome 使用 css 伪元素 :before 用 css 渲染图标。
您可以将高度和宽度设置为 1em,并将显示设置为 :block
i {
width: 1em;
height: 1em;
display:block;
cursor: pointer;
}
关于jquery - 使用 Font-Awesome - 在 Chrome 中,通过 <i class ="icon-ok"></i> 标记显示的图标不显示任何样式,也不会触发任何事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10195069/