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