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

Question

मैंने बूटस्ट्रैप 3.0 डाउनलोड किया और ग्लिफ़िकोंस को काम करने के लिए नहीं मिला। मुझे किसी प्रकार की "E003" त्रुटि मिलती है। कोई अंदाजा ऐसा क्यों हो रहा है? मैंने स्थानीय और ऑनलाइन दोनों की कोशिश की और मुझे अभी भी वही समस्या है।

Comments

आप त्रुटि कहाँ प्राप्त कर रहे हैं?

— डैनियल ए। व्हाइट

कहीं भी मैं आइकन सम्मिलित करता हूं ... यहां मुझे त्रुटि मिली है। केवल मैंने जो किया है वह साइट कस्टमाइज़र से बूटस्ट्रैप डाउनलोड करने के लिए है, और पिछली फ़ाइलों को बदल दिया है (फ़ॉन्ट फ़ाइलों में अलग-अलग नाम थे)। अब वे काम नहीं कर रहे हैं ... कई ब्राउज़र, फ़ायरफ़ॉक्स, क्रोम, यानी, एक ही चीज़ की कोशिश की है ... i.imgur.com/2f474kX.jpg

— 23

मैंने अभी हालिया रिलीज़ को डाउनलोड किया है और अगर मैं कम से कम सीएसएस फ़ाइल का उपयोग करता हूं तो ग्लिफ़ नहीं दिखाते हैं। अगर मैं 'सामान्य' बूटस्ट्रैप का उपयोग करता हूं। सब कुछ ठीक काम करता है।

— एंटोनियो सेस्टो

23 जून 2015 तक, नवीनतम रिलीज़ v3.3.5 को शामिल करें जिसमें अधिकतम कोई त्रुटि नहीं है

मैंने पाया कि मैं एक सफेद पृष्ठभूमि पर ग्लिफ़िकॉन का उपयोग कर रहा था और उन्हें दिखाने की उम्मीद कर रहा था। <I style = "color: black" class = "glyphicon glyphicon-new-window"> का उपयोग करके इसे ठीक किया।

— विजय वेपकोमा

Answer 1

मैं एक ही मुद्दा रहा था और इस पृष्ठ पर छिपी टिप्पणियों को छोड़कर इसके बारे में कोई जानकारी नहीं पा सका। मेरी फ़ॉन्ट फ़ाइलें Chrome के अनुसार ठीक लोड हो रही थीं, लेकिन आइकन ठीक से प्रदर्शित नहीं हो रहे थे। मैं इसे एक उत्तर दे रहा हूँ ताकि यह दूसरों की मदद करे।

कुछ गलत था फ़ॉन्ट फ़ाइलों के साथ जो मैंने बूटस्ट्रैप 3 के कस्टमाइज़र टूल से डाउनलोड किया था। सही फ़ॉन्ट प्राप्त करने के लिए, बूटस्ट्रैप होमपेज पर जाएं और पूर्ण .zip फ़ाइल डाउनलोड करें। वहाँ से चार फोंट फ़ाइलों को अपनी फोंट निर्देशिका में निकालें और सब कुछ काम करना चाहिए।

Comments

आपने कई घंटों के दर्द को बचाया। मैंने पहले ही एक घंटे का दर्द झेला था, लेकिन फिर मैंने यहां देखने के बारे में सोचा।

— क्रिस्टीना

getbootstrap.com होम पेज के काम के बूटस्ट्रैप-3.0.0 में शामिल लोगों के लिए फोंट फ़ाइलों को स्वैप करना। पारितोषिक के लिए धन्यवाद!

— मिशाल कोपेक

सही उत्तर! Customizer से फ़ॉन्ट फ़ाइलें दूषित हैं!

— चार्ल्स इंगॉल्स

मैं अपनी "मुझे भी" प्रतिक्रिया जोड़ना चाहता था और कहता हूं कि कुछ घंटों के प्रयास को बर्बाद करने के बाद, और लगभग क्रोध ने अपने कैरियर को छोड़ दिया, मुझे यह जवाब मिला और अब मेरे पास फिर से ग्लिफ़िकॉन काम कर रहा है। धन्यवाद!!

— dohpaz42

मैं उन सभी लोगों का हिस्सा बनने के लिए इंतजार नहीं कर सकता जो सफल हुए, लेकिन अभी स्टैक के लगभग हर एक समाधान और उत्तर की कोशिश करने के बावजूद, मैं अभी भी आइकन नहीं देख पा रहा हूं। मैंने बूटस्ट्रैप के नवीनतम संस्करण 3.3.7 को स्थापित करने के लिए एक पूरी तरह से नया MVC 5 ऐप शुरू करने और Nuget का उपयोग करने की भी कोशिश की, जो सभी फ़ोल्डर्स को सही ढंग से स्थापित करता है और कुछ भी ब्राउज़र डिबगर टूल में 404 नहीं दिखाता है या कुछ भी बता रहा है कि फोंट लोड नहीं हुए हैं और मैं आपको बता सकता हूं कि स्पैन के लिए कोड सही है तो मेरी समस्या कहां है। मैं ईमानदारी से नहीं जानता। मैंने सभी ब्राउज़रों का परीक्षण किया और कोई भी चिह्न नहीं दिखाता है

— मार्क रूसेल

Answer 2

पाठकों को ध्यान दें: @ user2261073 की टिप्पणी और @ जेफ के जवाब को कस्टमाइज़र में बग के बारे में पढ़ना सुनिश्चित करें । यह आपकी समस्या का कारण है।

---

फ़ॉन्ट फ़ाइल को सही तरीके से लोड नहीं किया जा रहा है। जांचें कि क्या फाइलें अपने अपेक्षित स्थान पर हैं।

@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');
}

जैसा कि डैनियल ने संकेत दिया है, यह एक mimetype मुद्दा भी हो सकता है। Chrome के उपकरण उपकरण नेटवर्क टैब में डाउनलोड किए गए फ़ॉन्ट दिखाते हैं:

Comments

और यह कि mimetypes ठीक से पंजीकृत हैं।

— डैनियल ए। व्हाइट

... हालाँकि जब मैं बूटस्ट्रैप.ज़िप फ़ाइल को डाउनलोड करता हूँ, तो फाइल की जगह होनी चाहिए, फिर भी मैं डबल-चेक किया गया और हर जगह इसकी जगह है। मैं

— mimetypes

@ user2261073 .eot फ़ाइल को लोड नहीं किया जाना चाहिए, जब तक आप इंटरनेट एक्सप्लोरर का उपयोग कर रहे हैं।

— user247702

लगता है मुझे समस्या मिल गई। बूटस्ट्रैप कस्टमाइज़र उदाहरणों के साथ आने वाले पूरे बूटस्ट्रैप पैकेज के अंदर अलग-अलग आकार के फोंट भेज रहा है। मैंने फाइलों को बदल दिया और अब सब कुछ ठीक चल रहा है। यह संभवतः बूटस्ट्रैप के कस्टमाइज़र में एक बग है? कौन जाने। क्या मैं इसे कहीं रिपोर्ट कर सकता हूं ताकि वे इस पर गौर कर सकें?

— स्कूटर

@ user2261073 आप इसे GitHub प्रोजेक्ट पर रिपोर्ट कर सकते हैं। पहले से ही एक सक्रिय बग रिपोर्ट लगती है: github.com/twbs/bootstrap/issues/10008

— user247702

Answer 3

मेरे मामले में मुझे ग्लिफ़िकोंस-हाफ़लिंग्स-रेगुलर.वॉफ़ के लिए 404 और मोबाइल ब्राउज़रों पर गैर-दृश्यमान ग्लिफ़िकॉन मिल रहे थे।

ऐसा लगता है कि woff के लिए MIME प्रकार के बारे में कुछ भ्रम है, एक से अधिक MIME प्रकार विभिन्न ब्राउज़रों द्वारा स्वीकार किए जाते हैं, लेकिन W3C कहता है :

application/font-woff

संपादित करें: वर्तमान में सभी ब्राउज़रों पर woff कार्यों के लिए निम्न MIME प्रकार का परीक्षण करने के बाद:

application/x-font-woff

संपादित करें: इस समय बूटस्ट्रैप का नवीनतम संस्करण (3.3.5) उसी प्रारंभिक परिणाम के साथ .woff2 फ़ॉन्ट का उपयोग करता है। Woff, अभी भी W3C युक्ति को परिभाषित कर रहा है, लेकिन इस समय MIME प्रकार प्रतीत हो रहा है:

application/font-woff2

Comments

इसने मुझे अच्छी दिशा में इशारा किया, लेकिन इसने मुझे क्रोम में एक और चेतावनी भी दी ... माइम प्रकार वास्तव में होना चाहिए: application/x-font-woffतब फ़ायरफ़ॉक्स और क्रोम अंततः दोनों खुश थे :)

— ghiscoding

धन्यवाद, यही मेरे लिए वास्तविक समस्या थी। सब कुछ स्थानीय रूप से ठीक काम कर रहा था, लेकिन एक बार Azure .woff प्रकार से प्रकाशित होने के बाद केवल एक ही समस्या थी।

— केविन क्लोएट

Answer 4

-अगर आपने उच्चतम मूल्यांकित उत्तर का अनुसरण किया है और यह अभी भी काम नहीं कर रहा है :

Fontफ़ोल्डर चाहिए अपने सीएसएस फ़ोल्डर के रूप में एक ही स्तर पर हो। रास्ता तय करने से काम bootstrap.css नहीं चलेगा ।

Bootstrap.cssनेविगेट करने के लिए है Fontsफ़ोल्डर वास्तव में इस तरह:

@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');
}

Comments

मुझे लगता है कि 70% ग्लिफ़िकॉन इस मामले में काम नहीं कर रहे हैं, महान जवाब देता है, मैं अक्सर बूटस्ट्रैप सीएसएस फ़ाइलों को सीएसएस / बूटस्ट्रैप में डालता हूं। बस उन्हें सीएसएस तक ले जाएं और सब कुछ काम करें

— एंडियाना

वैसे मेरे लिए रास्ता आपके द्वारा बताए अनुसार ही है, लेकिन यह अभी भी मेरे लिए काम नहीं करता है। न तो स्रोत पैकेज डाउनलोड करने और फ़ॉन्ट फ़ाइलों को प्रतिस्थापित करने के लिए। मुझे यह जोड़ना चाहिए कि कुछ ग्लिफ़िकॉन लोड करते हैं जबकि अन्य नहीं करते हैं। क्या आप मदद कर सकते हैं?

— डार्थ कोडर

मेरे पास फ़ॉन्ट फ़ोल्डर कहां नहीं है?

— स्विफ्ट

इसके अलावा cssफ़ोल्डर को आपके HTML फ़ाइल वाले फ़ोल्डर का सबफ़ोल्डर होना चाहिए। तो कम से कम, आपके पास 1) आपकी HTML फ़ाइल, 2) एक सबस्फ़ोल्डर में एक सीएसएस फ़ाइल है css, और 3) नामक एक सबफ़ोल्डर में फ़ॉन्ट फ़ाइलें fonts।

— किवी शापिरो

सीडीएन से लोड करने पर इससे कोई अंतर नहीं पड़ता है; केवल जब स्थानीय रूप से लोड हो रहा हो। //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.cssमेरे लिए इसे हल करने के लिए एक लिंक जोड़ना ।

— जेम्स विल्किंस

Answer 5

यदि अन्य समाधान काम नहीं कर रहे हैं, तो आप अपने लिए सब कुछ करने के लिए बूटस्ट्रैप पर भरोसा करने के बजाय एक बाहरी स्रोत से ग्लिफ़िकॉन आयात करने का प्रयास करना चाह सकते हैं। यह करने के लिए:

आप इसे HTML में कर सकते हैं:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

या सीएसएस:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

इस थ्रेड से edsiofi का श्रेय: बूटस्ट्रैप 3 ग्लिफ़िकॉन्स सीडीएन

Answer 6

मामले में किसी और के यहाँ समाप्त होने और बूटस्ट्रैप> = v4.0 का उपयोग करने पर: ग्लिफ़िकॉन समर्थन को गिरा दिया जाता है

रिलीज नोट्स से संबंधित हिस्सा:

ग्लिफ़िकॉन्स आइकन फ़ॉन्ट को गिरा दिया। यदि आपको आइकन की आवश्यकता है, तो कुछ विकल्प हैं:

ग्लिफ़िकॉन के अपस्ट्रीम संस्करण

Octicons

बहुत बढ़िया फ़ॉन्ट

स्रोत: https://v4-alpha.getbootstrap.com/migration/#compenders

यदि आप ग्लिफ़िकॉन का उपयोग करना चाहते हैं तो आपको इसे अलग से डाउनलोड करना होगा।

मैंने व्यक्तिगत रूप से फ़ॉन्ट विस्मयकारी कोशिश की और यह काफी अच्छा है। चिह्न जोड़ना ग्लाइकॉन के समान है:

<i class="fas fa-chess"></i>

Answer 7

मैं अपने इस पुराने प्रश्न को देख रहा था और चूँकि मुझे अब तक इसका सही उत्तर देना था, मेरे द्वारा टिप्पणियों में दिया गया था, मुझे लगता है कि मैं इसके लिए श्रेय भी चाहता हूँ।

समस्या इस तथ्य में निहित है कि बूटस्ट्रैप के कस्टमाइज़र टूल से डाउनलोड की गई ग्लिफ़िकॉन फ़ॉन्ट फ़ाइलें उन लोगों के साथ समान नहीं थीं जो बूटस्ट्रैप के मुखपृष्ठ पर पाए गए पुनर्निर्देशन से डाउनलोड की जाती हैं। वे जो काम कर रहे हैं, वे निम्नलिखित लिंक से डाउनलोड किए जा सकते हैं:

http://getbootstrap.com/getting-started/#download

पुरानी खराब कस्टमाइज़र फ़ाइलों की समस्या वाले किसी व्यक्ति को ऊपर दिए गए लिंक से फ़ॉन्ट को अधिलेखित करना चाहिए।

Comments

Customizer समस्या एक लंबे समय से पहले तय की गई थी। यह वर्तमान बूटस्ट्रैप में कोई समस्या नहीं है।

— cvrebert

आजकल, वे संभवतः आइकन फ़ॉन्ट स्थान के मुद्दों में चल रहे हैं, भले ही जिस तरह से आइकन फ़ॉन्ट पथ का काम प्रलेखित है ...

— cvrebert

इस मुद्दे की जाँच करने के लिए कुछ चीजें हैं। - आपकी साइट के लिए जाँच करें IIS में इस माइम प्रकार .. यह उपरोक्त मुद्दों में से एक ... के लिए वहाँ होना चाहिए - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg

— pedram

IE को छोड़कर मेरे सभी ग्लिफ़िकन्स सभी ब्राउज़रों में काम करते हैं। IE उन्हें पहले लोड पर प्रदर्शित करता है - F5 को हिट करता है और फिर प्रदर्शित नहीं करता है। DOM सही है, लागू किया गया css सही है। मुझे कोई हल नहीं मिल रहा है। विचार?

— स्किचन

मैं "सामग्री:" \ e080 "" सीएसएस को चेक / अनचेक कर सकता हूं जो सामग्री को एक विशेष चरित्र में सेट करता है। जब मैं ऐसा करता हूं, तो स्पैन का आकार शारीरिक रूप से कुछ से कुछ नहीं और वापस बदल जाता है। तो यह वास्तव में IE बग की तरह लगता है - चरित्र आकर्षित करने में विफल।

— स्किचन

Answer 8

Azure वेबसाइट्स में Woff MIME कॉन्फ़िगरेशन गायब है। आपको web.config में निम्नलिखित प्रविष्टि को जोड़ना होगा

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Comments

woff, woff2 and ttfएक्सटेंशन?

— किकेनेट

Answer 9

जैसा कि @Stijn ने बताया, Bootstrap.cssइस पैकेज को स्थापित करने के दौरान डिफ़ॉल्ट स्थान गलत है Nuget।

इस तरह दिखने के लिए इस अनुभाग को बदलें:

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

Comments

यदि आप LESS का उपयोग कर रहे हैं, तो आप इसे अपनी कम फ़ाइल में ओवरराइड कर सकते हैं और URL को बदलकर अपने gen'd CSS फ़ाइल से संबंधित पथों से मिलान कर सकते हैं या उन्हें रूट कर सकते हैं।

— क्रिस सियरलेस

यह अब बूटस्ट्रैप की नवीनतम रिलीज़ के साथ कोई समस्या नहीं होनी चाहिए। अपडेट करें!

— dball

Answer 10

आप कोड की इस लाइन को जोड़ सकते हैं और कर सकते हैं।

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

धन्यवाद।

Comments

यह v3 के बाद के संस्करणों में जोड़े गए कई नए आइकन याद कर रहा है।

— जेम्स विल्किंस

बिल्कुल सही जवाब, मेरे लिए वैसे भी।

— थनोर

Answer 11

IIS .woffडिफ़ॉल्ट रूप से फ़ाइलों को सर्वर नहीं करेगा , इसलिए IIS में आपको <mimeMap>अपनी web.configफ़ाइल में एक प्रविष्टि जोड़ने की आवश्यकता होगी ;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Comments

यह प्रत्येक IIS मशीन के लिए कॉन्फ़िगर करने के लिए याद रखने के बजाय बहुत बेहतर है। अच्छा उल्लेख

— मैटी बियर

आपको अपने मापदण्ड को वर्तमान मानकों के अनुसार "एप्लिकेशन / फॉन्ट-वूफ" होने के लिए अपडेट करना चाहिए: stackoverflow.com/a/5142316/2267817

— हमेशा लर्निंग

एप्लीकेशन / फॉन्ट-वॉफ बनाम एप्लीकेशन / एक्स-वोफ ?

— किकेनेट

Answer 12

क्या आपके पास अपने फोंट निर्देशिका में सभी नीचे की फाइलें हैं

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

Comments

यह सही जवाब है। एक व्यक्ति इन फ़ाइलों को रखने के लिए सही फ़ोल्डर ढूंढ सकता है, Xenu के लिंक का उपयोग कर सकता है: home.snafu.de/tilman/xenulink.html

— Nav

लेकिन, ऐसे लोग हैं, जिनके पास फोंट फ़ोल्डर में ये सभी फाइलें हैं, लेकिन अभी भी यह त्रुटि हो रही है यदि माइम प्रकार की woff IIS के साथ पंजीकृत नहीं है।

— स्टैक0 फ़्लोफ़्लो

फोंट निर्देशिका की आवश्यकता है? मेरे पास केवल bootstrap.css और bootstrap.js

— Kiquenet

Answer 13

मैंने अपने कम वेरिएबल को बदल दिया। बिना फाइल के मैंने वेरिएबल को संशोधित किया

@icon-font-path:          "fonts/";    

मूल था

@icon-font-path:          "../fonts/"; 

इससे समस्या पैदा हो रही थी

Comments

बूटस्ट्रैप-एसएएस 3.2.0.1 रत्न के लिए इसकी आवश्यकता प्रतीत होती है $icon-font-path: "/assets/bootstrap/"।

— जोशुआ मुहीम

निश्चित रूप से बूटस्ट्रैप के साथ काम करने का तरीका और इसके खिलाफ नहीं।

— हम्सटर

Answer 14

यह bootstrap.css और bootstrap.min.css में गलत कोडिंग के कारण है। जब आप बूटस्ट्रैप 3.0 को कस्टमाइज़र से डाउनलोड करते हैं तो निम्न कोड गायब होता है:

@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');
}

चूंकि यह ग्लिफ़िकॉन का उपयोग करने के लिए मुख्य कोड है, यह कार्य नहीं करेगा ...

पूर्ण पैकेज से सीएसएस-फाइलें डाउनलोड करें और यह कोड लागू किया जाएगा।

Answer 15

यही कारण था, कि आइकन मेरे लिए क्यों नहीं दिखे:

* {
    arial, sans-serif !important;
}

के बाद मैं अपने इस हिस्से को हटा दिया है CSS, सब कुछ इस तरह से काम करना चाहिए। महत्वपूर्ण समस्या पैदा करने वाला था।

Comments

धन्यवाद! 4 घंटे से अधिक समय तक मेरे सिर को खरोंचने और कई अलग-अलग चीजों की कोशिश करने के बाद मुझे याद आया कि मैंने महत्वपूर्ण के साथ "स्पैन" पर एक फ़ॉन्ट जोड़ा है। इसे हटा दिया और सब कुछ वापस सामान्य हो गया है ..

— अली हैदर

Answer 16

एक अन्य समस्या / समाधान में यह बूटस्ट्रैप 2.x कोड हो सकता है:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

और जब गाइड के आधार पर माइग्रेट हो रहा हो ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

आप आइकन वर्ग (फ़ॉन्ट संदर्भ से युक्त) जोड़ना भूल जाते हैं:

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Answer 17

नीचे यह मेरे लिए तय है। मुझे फायरबग कंसोल में उपयोग करके "खराब यूआरआई" त्रुटि मिल रही थी। आइकन E ### संख्या के रूप में दिखाई दे रहे थे। मुझे अपनी 'फोंट' निर्देशिका में .htaccess फ़ाइल को जोड़ना पड़ा। <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> संभव डुप्लिकेट: फ़ायरफ़ॉक्स पर डाउनलोड करने योग्य फ़ॉन्ट: खराब यूआरआई या क्रॉस-साइट एक्सेस की अनुमति नहीं है

Answer 18

यह बहुत लंबा शूट है, लेकिन यह मेरा मामला था और चूंकि यह पहले से ही यहां नहीं है।

यदि आप ट्विटर बूटस्ट्रैप को SASS का उपयोग करके gulp-sassया grunt-sassअर्थात कर रहे हैं। node-sass। सुनिश्चित करें कि आपके नोड मॉड्यूल अद्यतित हैं, खासकर यदि आपके पुराने प्रोजेक्ट पर काम कर रहे हैं।

यह पता चला है कि कुछ समय पहले SASS के निर्देश @at-rootका उपयोग @font-faceग्लिफ़िकोंस की परिभाषा में किया जाता है , https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bb7316a0634472e1243bb13fb9f46/assets/bootetets/bootstrap/ देखें। ।

यहाँ गोटा है node-sassअर्थात। यदि यह बहुत पुराना है तो निर्देश का libsassसमर्थन न करें @at-root। यदि यह मामला है, तो आपको एक @font-faceलिपटे मिलेगा @at-rootजिसमें ब्राउज़र को पता नहीं है कि क्या करना है। इसका परिणाम यह है कि कोई भी फ़ॉन्ट डाउनलोड नहीं किया जाएगा और आपको आइकन के बजाय कचरा दिखाई देगा।

Answer 19

नोट: नीचे एक आला परिदृश्य होने की संभावना है, लेकिन मैं इसे किसी और के उपयोगी होने की स्थिति में साझा करना चाहता था।

एक रेल परियोजना में, हम एक मणि के माध्यम से काफी पुन: उपयोग कर रहे हैं जो रेल इंजन का उपयोग कर रहा है bootstrap-sass। सभी ग्लिफ़िकॉन फ़ॉन्ट पथ संकल्प के अपवाद के साथ मुख्य परियोजना में अच्छी तरह से था।

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

हमने पाया कि संकल्प के दौरान जब हमें उम्मीद $bootstrap-sass-asset-helperथी falseकि यह सच होगा, इसलिए रास्ता अलग था।

हमने $bootstrap-sass-asset-helperइंजन रत्न में इनिशियलाइज़ होने का कारण बना :

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

उदाहरण के लिए इस मार्ग को हल करने का कारण था:

/assets/bootstrap/glyphicons-halflings-regular.woff

फिर से, किसी भी सामान्य रेल परियोजना का उपयोग करने में यह आवश्यक नहीं होना चाहिए bootstrap-sass, हम बस बहुत सारे विचारों का पुन: उपयोग कर रहे हैं और यह हमारे लिए काम करता है। उम्मीद है कि यह किसी और की सहायता कर सकता है।

Answer 20

फ़ॉन्ट के प्रतिपादन के बारे में आधिकारिक दस्तावेज क्या कहते हैं, यहां बताया गया है।

आइकन फ़ॉन्ट स्थान को बदलना बूटस्ट्रैप मान लेता है आइकन फ़ॉन्ट फ़ाइलें ../fonts/ निर्देशिका में, संकलित CSS फाइलों के सापेक्ष स्थित होंगी। उन फ़ॉन्ट फ़ाइलों को ले जाने या उनका नाम बदलने का अर्थ है कि सीएसएस को तीन तरीकों में से एक में अपडेट करना: स्रोत में @ आइकन-फ़ॉन्ट-पथ और / या @ आइकन-फ़ॉन्ट-नाम चर को कम फ़ाइलों में बदलें। कम संकलक द्वारा प्रदान किए गए सापेक्ष URL विकल्प का उपयोग करें। संकलित CSS में url () पथ बदलें। जो भी विकल्प आपके विशिष्ट विकास सेटअप को सूट करता है, उसका उपयोग करें।

इसके अलावा यह हो सकता है कि आप फोंट फ़ोल्डर को रूट डायरेक्टरी में कॉपी करने में चूक गए

Comments

मैं फ़ॉन्ट फ़ोल्डर की नकल करने से चूक गया हूं, मुझे नहीं पता कि यह कहां है? क्या कोई मेरी मदद कर सकता है?

— स्विफ्ट

Answer 21

मुझे यह समस्या थी और यह varables.less फ़ाइल के कारण हुआ था। आइकन-फ़ॉन्ट-पथ मान सेट करने के लिए इसे ओवरराइड करने से समस्या हल हो गई।

संरचित फ़ाइल इस तरह दिखती है:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

कंटेंट की जड़ में अपनी खुद की वैरिएबल.लेस फाइल को जोड़ना और इसे स्टाइल में संदर्भित करना। 404 एरर को हल किया।

चर। अहित में शामिल हैं:

@icon-font-path:          "fonts/";

Comments

इसने मुझे एहसास दिलाया कि मैंने अपने पथ चर को नंगा कर दिया है ... यादृच्छिक लेकिन हाँ धन्यवाद!

— टेलर ए। लीच

Answer 22

मुझे नुगेट से बूटस्ट्रैप मिला। जब मैंने अपनी साइट प्रकाशित की तो ग्लिफ़ काम नहीं आया।

मेरे मामले में, मुझे प्रत्येक सामग्री के लिए बिल्ड एक्शन को 'कंटेंट' पर सेट करके और उन्हें 'कॉपी ऑलवेज' पर सेट करके काम करना पड़ा।

Answer 23

मेरे पास ग्लिफ़िकॉन-एरो-डाउन के लिए एक बॉक्स चौड़ाई कोड \ e094 था, वास्तव में मैंने सीएसएस वर्ग में ग्लिफ़िकॉन को जोड़ने की समस्या को हल किया :

<i class="glyphicon  glyphicon-arrow-down"></i>

अगर यह किसी की मदद कर सकता है ...

Comments

यार यह भी मेरी समस्या थी CDN का उपयोग करते हुए

— रिचर्ड बार्कर

Answer 24

उदाहरण के लिए, सुनिश्चित करें कि आप फ़ॉन्ट परिवार निर्दिष्ट नहीं कर रहे हैं

*{font-family: Verdana;}

मैं तत्वों से हाफिंग फ़ॉन्ट हटा देगा।

Answer 25

मुझे वही समस्या हो रही थी जहाँ ब्राउज़र फ़ॉन्ट फ़ाइलों को खोजने में असमर्थ था, और मेरी समस्या मेरी .htaccess फ़ाइल में बहिष्करण के कारण थी जो कि श्वेत सूची में थी, जिन्हें index.phpप्रसंस्करण के लिए नहीं भेजा जाना चाहिए । फ़ॉन्ट फ़ाइल लोड नहीं किया जा सकता के रूप में अक्षर BLOB के साथ बदल दिए गए थे।

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

जैसा कि आप देख सकते हैं, छवियों, आरएसएस और xml जैसी फ़ाइलों को फिर से लिखना से बाहर रखा गया है, लेकिन फ़ॉन्ट फ़ाइलें हैं .woffऔर .woff2फ़ाइलें हैं, इसलिए इनको भी श्वेतसूची में जोड़ने की आवश्यकता है।

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

श्वेतसूची में जोड़ना woffऔर woff2फ़ॉन्ट फ़ाइलों को लोड करने की अनुमति देता है, और ग्लिफ़िकॉन को तब ठीक से प्रदर्शित होना चाहिए।

Answer 26

आपको इस आदेश द्वारा सेट करना होगा:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @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'); } 
</style>

Answer 27

मेरे लिए काम करने से मार्गों को बदल दिया गया:

@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');
}

सेवा

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Answer 28

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

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

http://glyphicons.bootstrapcheatsheets.com/

उम्मीद है की वो मदद करदे।

Answer 29

@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');}

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

Answer 30

मैंने बस Ctrl + c, Ctrl + v का उपयोग करके bootstrap.css से फ़ॉन्ट का नाम बदला और यह काम किया।