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
});

当我呈现页面时，光标悬停在元素上时不会变为指针。当我单击图标时也没有任何反应。在绑定事件之前，我确保该图标存在。

请注意，我使用的是元素而不是其他任何东西。好像当我明确设置这个元素的样式时"display: inline-block;"它工作正常。

根据我的测试，这仅发生在 Chrome 上。在 Firefox 和 IE 中运行良好。我当前的 Chrome 版本是 18，但它也会影响其他版本。

score 5 · Accepted Answer

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

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

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

score 5 · Accepted Answer

更简洁的方法是简单地将样式添加到:before元素（因此您不必担心对象的高度或宽度）。

这是我的 CSS 示例代码：

i:before {
  cursor: pointer;
}

2 回答 2