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

我正在使用Font-Awesome,它是用于Twitter Bootstrap的标志性字体.

加价 –

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提交了一个错误

最佳答案

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

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

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