एचटीएमएल को बदलने के बिना बूटस्ट्रैप 3 में FontAwesome के साथ ग्लाइफिकॉन को कैसे बदलें?

Question

मैं अपने प्रोजेक्ट में Bootstrap 3 का उपयोग कर रहा हूं और मैं Glyphicons बंडल के बजाय FontAwesome आइकन लाइब्रेरी का उपयोग कर रहा हूं।

समस्या यह है कि मेरे पास कुछ तृतीय-पक्ष घटक हैं जो ग्लाइफ़िकॉन पर भरोसा करते हैं और मैं उनका HTML नहीं बदलना चाहता हूं।

मैं Bower और SASS + Compass (SCSS) के माध्यम से फ़ॉन्ट-कमाल शामिल कर रहा हूं।

क्या HTML को बदलने और अन्य सीएसएस कक्षाओं को लागू किए बिना FontAwesome के साथ ग्लाइफ़िकॉन को प्रतिस्थापित करना संभव है?

Answer 1

आप FontAwesome एससीएसएस का उपयोग कर लोगों के साथ Glyphicon सीएसएस वर्गों ओवरलोड निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं:

// Overloading "glyphicon" class with "fa". 
.glyphicon { 

    @extend .fa; 

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left". 
    &.glyphicon-chevron-left { 
     @extend .fa-chevron-left; 
    } 

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right". 
    &.glyphicon-chevron-right { 
     @extend .fa-chevron-right; 
    } 
} 

यह समाधान स्टीवन Clontz की based on code है।

सुनिश्चित करें कि, इस ओवरराइड से पहले FontAwesome SCSS आयात किया गया है। शेवरॉन-बाएँ और निम्नलिखित FontAwesome माउस के साथ शेवरॉन-सही:

ऊपर के उदाहरण में मैं निम्नलिखित दो Glyphicons ओवरलोडिंग कर रहा हूँ तीर छोड़ दिया और तीर सही सम्मान से।

आपको जो चाहिए उसे प्राप्त करने के लिए आपको तीसरे पक्ष के घटकों में उपयोग किए गए सभी आइकनों को अधिभारित करने की आवश्यकता होगी।

लेकिन, जैसा कि एक हैक और इस पर विचार सभी चिह्न ओवरलोड नहीं है, कारण यह अपने सीएसएस अनावश्यक रूप से बड़े हो जाएंगे!

विभिन्न आइकन पुस्तकालयों के लिए समर्थन लागू करने के लिए अपने तीसरे पक्ष के विक्रेता को मनाने पर विचार करें। यह एक उचित समाधान होगा।

Answer 2

मैंने इस गिस्ट को सभी ग्लिफिकॉन आइकन को फ़ॉन्ट-कमाल में मैप करने के लिए बनाया है। मेरा अनुमान है कि इसकी लगभग 95% सटीकता और कवरेज है (ग्लाइफ़िकॉन में कुछ बेकार प्रतीक हैं जो फ़ॉन्ट-कमाल नहीं करते हैं)।

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of gist

---

हालांकि इस अगर आप अपने बूटस्ट्रैप निर्माण से Glyphicon माउस के सभी हटाने लोड से अधिक सभी चिह्न करता है आप वास्तव में कुछ बाइट्स बचत (हो - फ़ॉन्ट निश्चित रूप से भयानक)

Answer 3

शुद्ध सीएसएस में केवल ग्लिफिकॉन क्लास को फ़ॉन्ट-भयानक वर्ग (.fa) के समान गुणों के साथ परिभाषित करें और इच्छित आइकन के साथ संवाद बनाएं:

.glyphicon{ 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon-chevron-left:before{ 
    content:"\f053" 
} 
.glyphicon-chevron-right:before{ 
    content:"\f054" 
}