Using Font-Awesome - In Chrome, icons displayed via <i class=“icon-ok”></i> markup do not show any style and do not trigger any events on it

Question

I am using Font-Awesome which is 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 render the page, the cursor does not change to pointer when hovered over the element. Also nothing happens when I click on the icon. I made sure that the icon exists before I bind the event.

Note that I am using element & not anything else. Seems like when I explicitly set the style for this element to "display: inline-block;" it works fine.

This according to my tests happens only on Chrome. Works fine in Firefox & IE. My current Chrome version is 18 but it affects other versions as well.

I have already filed a bug at https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

This is happening because there isn't any content in the <i> element - font awesome uses the css pseudo element :before to render the icon in with css.

You could set a height and a width of 1em and set display to :block

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

Answer 2

A cleaner approach is to simple add the styles to the :before element (so you don't have to worry about the object height or width).

Here is my CSS example code:

i:before {
  cursor: pointer;
}