बूटस्ट्रैप 3.0 में ग्लिफ़िकॉन का उपयोग कैसे करें

Question

मैंने पहले ही बूटस्ट्रैप 2.3 में ग्लिफ़िकॉन का उपयोग किया है लेकिन अब मैंने बूटस्ट्रैप 3.0 में अपग्रेड किया है। अब, मैं आइकन संपत्ति का उपयोग करने में असमर्थ हूं।

बूटस्ट्रैप 2.3 में, नीचे टैग काम कर रहा है

<i class="icon-search"></i>

बूटस्ट्रैप 3.0 में, यह काम नहीं कर रहा है।

Comments

हाय सब, मैं एक ही किया है और संरचना का पालन किया है, लेकिन सही ग्लिफ़िकॉन नहीं मिल रहा है ... एक अज्ञात 0101 प्रकार की छवि को ग्लिफ़िकॉन के बजाय दिखाया गया है

— शिवांग गुप्ता

धन्यवाद, वास्तव में समस्या यह थी कि मैं इसे बिना सीएसएस में परिवर्तित किए बिना सीधे फ़ाइल का उपयोग कर रहा था ... उफ़

— शिवांग गुप्ता

संस्करण 3.0.0 के लिए, यह चूक से टूट जाता है। कुछ करने की कोशिश की solutions, कोई भी मेरे लिए काम नहीं करता है।

— एंड्रयू_ १५१०

मैं इस मुद्दे का उपयोग कर रहा हूँ। कम फ़ाइल का उपयोग करके सीधे। Js. बेशक, उस स्थिति में, मैं इसे काम करते हुए भी देखना चाहूंगा

— मार्क

Answer 1

आइकन (ग्लिफ़िकॉन) अब एक अलग सीएसएस फ़ाइल में निहित हैं ।

मार्कअप बदल गया है:

<i class="glyphicon glyphicon-search"></i>

या

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

यहां बूटस्ट्रैप 3 के लिए परिवर्तनों की एक सहायक सूची दी गई है: http://bootply.com/bootstrap-3-migration-guide

Comments

हाय सब, मैं एक ही किया है और संरचना का पालन किया है, लेकिन सही ग्लिफ़कॉन नहीं मिल रहा है ... एक अज्ञात 0101 प्रकार की छवि को ग्लिफ़िकॉन के बजाय दिखाया गया है

— शिवांग गुप्ता

क्या आप अपना कोड दिखा सकते हैं जिसमें बूटस्ट्रैप और ग्लिफ़िकॉन सीएसएस शामिल हैं? क्या आप ब्राउज़र कंसोल में कोई त्रुटि देख रहे हैं?

— ज़िम

बस सुनिश्चित करें कि आप ग्लाइफ़िकॉन को शामिल कर रहे हैं। सही ढंग से। यह ठीक काम करना चाहिए: bootply.com/61521

— Zim

मैंने इसे ठीक से जोड़ा है ... संरचना सीएसएस / फोंट / ...., सीएसएस / कम / ..., सीएसएस / bootstrap.min.css और bootstrap.min.css में मैंने @import को शामिल किया है "कम / बूटस्ट्रैप-glyphicons.less ";

— शिवांग गुप्ता

अलग सीएसएस फ़ाइल लिंक टूट गया है।

— ट्रेवी वाटर वॉटर

Answer 2

तुम वहाँ जाओ:

<i class="glyphicon glyphicon-search"></i>

अधिक जानकारी:

http://getbootstrap.com/components/#glyphicons

Btw। आप इस रूपांतरण उपकरण का उपयोग कर सकते हैं , यह आइकन के लिए कोड को भी अपडेट करेगा:

Comments

बूटली माइग्रेशन कोड को TWB 3 में परिवर्तित करने में बहुत समय बचाता है। बहुत उपयोगी, @Michael / Buhake-Sindi।

— फर्नांडो कोश

Answer 3

यदि आप एक स्वनिर्धारित बूटस्ट्रैप 3 डिस्ट्रो डाउनलोड करते हैं तो आपको यह करना होगा:

1. Https://github.com/twbs/bootstrap/archive/v3.0.0.zip से पूरा डिस्ट्रो डाउनलोड करें
2. Uncompress और fontsअपने बूटस्ट्रैप निर्देशिका के लिए बुलाया पूरा फ़ोल्डर अपलोड करें । अन्य फ़ोल्डरों के साथ एक साथ रखो "सीएसएस, जेएस"।

इससे पहले का उदाहरण:

\css
\js
index.html

अपलोड के बाद का उदाहरण:

\css
\fonts
\js
index.html

Comments

यह पूरी तरह से ठीक है (जनवरी 2016)। साझा करने के लिए धन्यवाद!

— डेवनेर

Answer 4

यदि आप कम का उपयोग कर रहे हैं, और यह आइकन फ़ॉन्ट लोड नहीं कर रहा है, तो आपको फ़ाइल चर पर जाने के लिए फ़ॉन्ट पथ की जाँच करनी होगी। बिना चिह्न के और मेरे लिए काम किए @ चिह्न-फ़ॉन्ट-पथ पथ को बदलें ।

Answer 5

बूटस्ट्रैप 3 के लिए स्पैन टैग की आवश्यकता है न कि मैं

<span class="glyphicon glyphicon-search"></span>`

Answer 6

फोंट को शामिल करें अपने सीएसएस के पास / फोंट निर्देशिका के लिए सभी फॉन्ट फाइलों पर कॉपी करें।

1. सीएसएस या लेस को शामिल करें आपके पास अपनी परियोजना में फोंट को सक्षम करने के लिए दो विकल्प हैं: वेनिला सीएसएस या स्रोत लेस। वेनिला सीएसएस के लिए, बस रिपॉजिटरी में / सीएसएस से संकलित सीएसएस फ़ाइल शामिल करें ।
2. LESS के लिए, अपने मौजूदा बूटस्ट्रैप निर्देशिका में / से कम .less फ़ाइलों की प्रतिलिपि बनाएँ । फिर इसे @stport "bootstrap-glyphicons.less" के माध्यम से bootstrap.less में आयात करें ; । रेडीमाइल जब तैयार हो।
3. कुछ आइकन जोड़ें! फोंट और सीएसएस को जोड़ने के बाद, आप आइकन का उपयोग कर सकते हैं। उदाहरण के लिए,<span class="glyphicon glyphicon-ok"></span>

स्रोत

Comments

हाय सब, मैं एक ही किया है और संरचना का पालन किया है, लेकिन सही ग्लिफ़िकॉन नहीं मिल रहा है ... एक अज्ञात 0101 प्रकार की छवि को ग्लिफ़िकॉन के बजाय दिखाया गया है

— शिवांग गुप्ता

Answer 7

यदि आप अपने एप्लिकेशन को बनाने के लिए ग्रंट का उपयोग कर रहे हैं, तो संभव है कि निर्माण के दौरान पथ में परिवर्तन हो। इस मामले में आपको अपनी ग्रन्ट फ़ाइल को इस तरह संशोधित करना होगा:

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },

Answer 8

बूटस्ट्रैप से सभी फ़ाइलों को डाउनलोड करें और फिर इस सीएसएस को शामिल करें

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

Answer 9

यह मदद कर सकता है। इसमें कई उदाहरण हैं जो समझने में उपयोगी होंगे।

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

Comments

ध्यान दें कि लिंक-केवल उत्तर हतोत्साहित किए जाते हैं, एसओ उत्तर एक समाधान के लिए खोज का अंतिम बिंदु होना चाहिए (बनाम संदर्भों का एक और ठहराव, जो समय के साथ बासी हो जाते हैं)। लिंक को संदर्भ के रूप में रखते हुए कृपया यहां एक स्टैंड-अलोन सिनोप्सिस जोड़ने पर विचार करें।

— क्लेओपेट्रा