Using Font-Awesome - in Chrome, icons displayed with <i class = "icon-ok"> </i> markup do not show any style and do not cause any events on it

Question

I use Font-Awesome, which is an iconic font for use with Twitter Bootstrap.

Markup -

<i class="icon-remove reset-preference-button"></i>

CSS -

.reset-preference-button {
cursor: pointer;
}

JavaScript -

$(".reset-preference-button").on("click", function() {
// ... do something
});

When I draw a page, the cursor does not change to a pointer when it hovers over an element. Also, nothing happens when I click on the icon. I made sure the icon exists before I bind the event.

Please note that I am using an element, not something else. It looks like when I explicitly set the style for this element "display: inline-block;", it works fine.

Chrome. FF IE. - 18, .

https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

, <i> - awesome - css: css.

1em : block

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

Answer 2

, :before ( ).

CSS:

i:before {
  cursor: pointer;
}