फ़ॉन्ट-विस्मयकारी का उपयोग करना - क्रोम में, <i class = "icon-ok"></i> मार्कअप के माध्यम से प्रदर्शित आइकन कोई शैली नहीं दिखाते हैं और किसी भी घटना को ट्रिगर नहीं करते हैं

Question

मैं फ़ॉन्ट-विस्मय का उपयोग कर रहा हूं जो कि प्रतीकात्मक फ़ॉन्ट है ट्विटर बूटस्ट्रैप के साथ प्रयोग करें।

मार्कअप -

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

सीएसएस -

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

जावास्क्रिप्ट -

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

जब मैं पेज प्रस्तुत करना, कर्सर सूचक जब तत्व पर hovered नहीं बदलता है। जब भी मैं आइकन पर क्लिक करता हूं तब कुछ भी नहीं होता है। मैंने सुनिश्चित किया कि ईवेंट को बांधने से पहले आइकन मौजूद है।

ध्यान दें कि मैं तत्व & का उपयोग कर रहा हूं और कुछ भी नहीं। ऐसा लगता है कि जब मैंने स्पष्ट रूप से इस तत्व के लिए शैली को "display: inline-block;" पर सेट किया है तो यह ठीक काम करता है।

यह मेरे परीक्षणों के मुताबिक केवल क्रोम पर होता है। एफएफ & आईई में ठीक काम करता है। मेरा वर्तमान क्रोम संस्करण 18 है लेकिन यह अन्य संस्करणों को भी प्रभावित करता है।

मैं पहले से ही https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

में एक बग दर्ज किया है इसका कारण यह है <i> तत्व में कोई सामग्री नहीं है, वहाँ क्या हो रहा है - भयानक फ़ॉन्ट सीएसएस छद्म तत्व का उपयोग करता: इससे पहले कि सीएसएस के साथ में आइकन रेंडर करने के लिए।

आप करने के लिए एक ऊंचाई 1em की चौड़ाई और प्रदर्शन सेट सेट कर सकते हैं:

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

Answer 2

एक क्लीनर दृष्टिकोण :before तत्व को शैलियों जोड़ने सरल करने के लिए है (ताकि आप के बारे में चिंता करने की ज़रूरत नहीं ब्लॉक वस्तु ऊंचाई या चौड़ाई)।

i:before { 
    cursor: pointer; 
} 

:

यहाँ मेरी सीएसएस उदाहरण कोड है