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
-
01-06-2021 - |
문제
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
해결책
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;
}
다른 팁
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;
}