ट्विटर बूटस्ट्रैप में कस्टम आइकन कैसे जोड़ें?

Question

मैं बिना समस्या के ट्विटर बूटस्ट्रैप के साथ आइकन जोड़ रहा हूं। उनके पास बहुत सारे विकल्प हैं।

http://twitter.github.com/bootstrap/base-css.html#icons

हालांकि, मैं नहीं उचित आइकन मेनू आइटम में से एक के लिए मिल सकता है। यह "कार" के बारे में है। मुझे जो चाहिए वह है कि मैं अपना कस्टम आइकन जोड़ना चाहता हूं। मैं यह कैसे कर सकता हूँ? निश्चित रूप से मन उपसर्ग .icon-* का उपयोग करने के

.icon-car { 
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); 
    background-position: center center; 
} 

कीपिंग के बाद से यह एक विशेषता चयनकर्ता के बूटस्ट्रैप द्वारा निर्धारित द्वारा लक्षित है:

Answer 1

आप की तरह अपने स्वयं के वर्ग में यह परिभाषित करते हुए अपने स्वयं के आइकन बना सकते हैं सभी शैलियों को लागू करें (चौड़ाई/ऊंचाई/रेखा-ऊंचाई आदि ...)।

मूल आइकन (14x14) के समान चौड़ाई और ऊंचाई को रखने की कोशिश करें, इस तरह आपको अपनी चौड़ाई और ऊंचाई को परिभाषित करने की आवश्यकता नहीं होगी और यह आपके तत्वों के line-height से गड़बड़ नहीं करेगा। यहां ऐसे मामले के साथ एक डेमो है: http://jsfiddle.net/RwFeu/

Answer 2

यहां हम क्या करते हैं, ताकि सभी आइकन एक ही स्प्राइट फ़ाइल में हों और आप मनमाने ढंग से आकार वाले आइकन की अनुमति दे सकें।

[class^="icon-custom-"], 
[class*=" icon-custom-"] { 
    background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8"); 
} 

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; } 
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px } 

और फिर अपने मार्कअप में की तरह एक सीएसएस फ़ाइल,

<i class="icon-search"></i> a standard bootstrap icon 
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file. 
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon 
<!-- spritefile from www.10000ft.com. not for reuse, please --> 

ध्यान दें कि यह मान लिया गया एक भी स्प्राइट फ़ाइल है कि सभी आइकन हैं पैदा करते हैं। यदि आपके पास एकाधिक स्प्राइट फ़ाइलें हैं, तो background-image तदनुसार प्रत्येक आइकन के लिए सेट करने की आवश्यकता है।

http://jsfiddle.net/shyamh/cvHdt/

यह समाधान पर JSFiddle उदाहरण Kevin