使用Font-Awesome - 在Chrome中,通过<i class ="icon-ok"> </ i>标记显示的图标不显示任何样式,也不会触发任何事件

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上.在FF和IE中正常工作.我目前的Chrome版本是18,但它也会影响其他版本.

我已经在https://github.com/FortAwesome/Font-Awesome/issues/157上提交了一个错误

Answer 1

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

您可以设置1em的高度和宽度,并将display设置为:block

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

Answer 2

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

这是我的CSS示例代码:

i:before {
  cursor: pointer;
}