jquery - 使用 Font-Awesome - 在 Chrome 中，通过 标记显示的图标不显示任何样式，也不会触发任何事件

Question

我使用的是 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 提交了错误

Answer 1

发生这种情况是因为 <i> 中没有任何内容element - font awesome 使用 css 伪元素 :before 用 css 渲染图标。

您可以将高度和宽度设置为 1em，并将显示设置为 :block

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}