Font-Awesome Kullanımı - Chrome'da, <i class = "icon-ok"></i> işaretlemesiyle gösterilen simgeler herhangi bir stil göstermiyor ve üzerinde herhangi bir olay tetiklemiyor

Question

Simgesel yazı tipi olan Font-Awesome kullanıyorum Twitter Bootstrap ile kullanın.

İşaretleme -

<i class="icon-remove reset-preference-button"></i> 

CSS -

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

JavaScript - Ben sayfanın sunulmasına zaman öğenin üzerine süpürdü zaman

$(".reset-preference-button").on("click", function() { 
// ... do something 
}); 

, imleç işaretçi değişmez. Simgeye tıkladığımda hiçbir şey olmuyor. Etkinliği bağlamadan önce simgenin var olduğundan emin oldum.

Not & öğesinin başka bir şey kullanmıyorum. Bu elemanın stilini "display: inline-block;"'a açıkça ayarladığımda iyi çalışıyor gibi görünüyor.

Bu, yaptığım testlere göre yalnızca Chrome'da gerçekleşiyor. FF & IE'de düzgün çalışıyor. Şu anki chrome versiyonum 18 ama diğer versiyonları da etkiliyor.

Zaten bu <i> elemanda herhangi bir içerik olmadığından oluyor https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

konumuna bir hata bulundular - müthiş yazı css sözde elemanı kullanır: css ile simgeyi işlemek için önce.

Sen bir yükseklik ve 1em genişliğinde ve set ekran ayarlayabilirsiniz

:

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

Answer 2

Bir temizlikçi yaklaşım :before elemana stilleri eklemek basit etmektir (böylece endişelenmenize gerek yok blokta nesne yüksekliği veya genişliği).

i:before { 
    cursor: pointer; 
} 

: Burada

benim CSS kod örneği