Używanie czcionek niesamowite - w Chrome ikony wyświetlane za pomocą <i class = "icon-ok"></i> znaczniki nie pokazują żadnego stylu i nie wyzwalają żadnych zdarzeń na nim

Question

Używam czcionek niesamowitych, które są ikoną czcionki dla używać z 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 
}); 

Kiedy renderowania strony, kursor nie kiedy unosił się nad elementem zmieni się wskaźnik. Po kliknięciu ikony nic się nie dzieje. Upewniłem się, że ikona istnieje przed związaniem zdarzenia.

Zauważ, że używam elementu & nic poza tym. Wygląda na to, że gdy jawnie ustawiam styl tego elementu na "display: inline-block;", to działa dobrze.

To według moich testów dzieje się tylko w Chrome. Działa dobrze w FF & IE. Moja obecna wersja chrome ma 18, ale wpływa również na inne wersje.

już złożony błąd w https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

Dzieje się tak dlatego, że nie ma żadnej treści w elemencie <i> - czcionka niesamowite wykorzystuje element pseudo CSS: przed uczynić ikonę z css.

Można ustawić wysokość i szerokość 1 em i ustawić wyświetlanie na: blok

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

Answer 2

Czystsze podejście jest proste dodać style z elementem :before (więc nie trzeba się martwić wysokość lub szerokość obiektu).

Oto mój przykładowy kod CSS:

i:before { 
    cursor: pointer; 
}