बूटस्ट्रैप ग्लाइफ़िकॉन कैसे काम करते हैं?

Question

मैं सीएसएस और HTML के कुछ मूल बातें एक पेशेवर पता है और कभी कभी उनके साथ काम है, लेकिन नहीं कर रहा हूँ, और मैं कैसे बूटस्ट्रैप Glyphicons काम के बारे में उत्सुक हूँ। मेरा मतलब है कि बूटस्ट्रैप ज़िप फ़ाइल में कोई छवियां नहीं हैं, तो छवियां कहां से आती हैं? के रूप में आप अपने प्रश्न में उल्लेख किया छवियों का उपयोग कर -

Answer 1

बूटस्ट्रैप 2.x में, Glyphicons छवि विधि का इस्तेमाल किया।

छवि विधि के साथ कमियां था कि:

• आप माउस के रंग
• आप माउस की पृष्ठभूमि रंग
• आप नहीं कर सके 'नहीं बदल सकता है नहीं बदल सकता है टी माउस

तो बजाय बूटस्ट्रैप 2.x में glyphicons का आकार बढ़ाने, बहुत से लोगों को फ़ॉन्ट-भयानक इस्तेमाल किया, के रूप में यह एसवीजी प्रतीक जो ऐसी सीमाओं नहीं था इस्तेमाल किया।

बूटस्ट्रैप 3.x में, Glyphicons फ़ॉन्ट विधि का उपयोग करें।

एक आइकन छवियों का उपयोग करने का लाभ होता है प्रतिनिधित्व करने के लिए एक फ़ॉन्ट का उपयोग करना:

• स्केलेबल - अच्छी तरह से ग्राहक डिवाइस के संकल्प की परवाह किए बिना काम करता है
• सीएसएस
• सब कुछ परंपरागत प्रतीक कर सकते हैं के साथ रंग बदल सकते हैं कर सकते हैं (उदाहरण के लिए अस्पष्टता, रोटेशन इत्यादि बदलें)
• स्ट्रोक, ग्रेडियेंट, छाया, आदि इत्यादि जोड़ सकते हैं
• टेक्स्ट (लिगरेचर के साथ) में कनवर्ट करें
• Ligatures स्क्रीन रीडर्स
• फोंट के लिए माउस को बदलने द्वारा पढ़ा जाता है सीएसएस

में font-family बदलते आप देख सकते हैं कि तुम क्या प्रतीक here के लिए फ़ॉन्ट विधि के साथ क्या कर सकते हैं के रूप में सरल है।

तो बूटस्ट्रैप वितरण में, आप Glyphicon फ़ॉन्ट फ़ाइलें देख सकते हैं: इस फ़ॉन्ट के लिए

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 

और सीएसएस लिंक:

fonts\glyphicons-halflings-regular.eot 
fonts\glyphicons-halflings-regular.svg 
fonts\glyphicons-halflings-regular.ttf 
fonts\glyphicons-halflings-regular.woff 

बूटस्ट्रैप सीएसएस तो जैसे Glyphicon फॉन्ट को संदर्भित करता है (ध्यान दें font-family) .glyphicon आधार वर्ग का उपयोग कर:

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    ... 
} 

और फिर प्रत्येक Glyphicon अलग-अलग सितारे वर्ग जो Glyphicon Halflings फॉन्ट के भीतर एक Unicode reference को संदर्भित करता है, उदाहरण के लिए उपयोग करता है:

.glyphicon-envelope:before { 
    content: "\2709"; 
} 

यही कारण है कि आप आधार .glyphicon वर्ग के साथ-साथ अलग-अलग सितारे वर्ग span तत्व के खिलाफ बूटस्ट्रैप 3 में उपयोग करना चाहिए:, इस तरह के विस्तृत विवरण के लिए

<span class="glyphicon glyphicon-envelope"></span>