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

[tankchintan]

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 FF & IE. My current chrome version is 18 but it affects other versions as well.

Please let me know if this is a legitimate bug or just me. Thanks for the superb library BTW!

[redbar0n]

I experienced the same problem.

I changed line 34 in font-awesome.css to:

display: inline-block; /* Default was 'inline'. This is a personal modification to make it work with tooltips.*/

Which is a quick monkey-patch that fixes it for me. Don't know if I introduced some bugs by doing that though.

Hope this issue will be resolved.

[kremalicious]

the pseudo element is what's displayed, not the ielement, so using this might work too:

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

Edit: the sprites.less reset was removed in 2.0 so the display: inline should be gone too

[Turbo87]

I had the same issues with Chromium 18 and the 2.0 version of FontAwesome. I resolved it be adding the following CSS style at line 34:

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
}

[markushausammann]

Why was this closed? Has it been fixed?

[Turbo87]

the solution for the event handling it embedding the <i> tag inside of an <a> tag.