বুটস্ট্র্যাপ 3 গ্লাইফিকন কাজ করছে না

360

আমি বুটস্ট্র্যাপ 3.0 ডাউনলোড করেছি এবং গ্লাইফিকনগুলি কাজ করতে পারি না। আমি এক ধরণের "E003" ত্রুটি পেয়েছি। কোনো ধারণা আছে কেন এটি হছে? আমি স্থানীয় এবং অনলাইন উভয়ই চেষ্টা করেছি এবং এখনও আমি একই সমস্যা পেয়েছি।

twitter-bootstrap-3  glyphicons 
— scooterlord
সূত্র
1
আপনি কোথায় ত্রুটি পাচ্ছেন?
— ড্যানিয়েল এ হোয়াইট
1
আমি যে কোনও জায়গায় আইকন সন্নিবেশ করিয়েছি ... আমি পেয়েছি ত্রুটি এখানে। কেবলমাত্র আমি যা করেছি তা হ'ল সাইট কাস্টমাইজার থেকে বুটস্ট্র্যাপ ডাউনলোড করা এবং পূর্ববর্তী ফাইলগুলি প্রতিস্থাপন করা (ফন্ট ফাইলগুলির বিভিন্ন নাম থাকলেও)। এখন তারা কাজ করছে না ... বেশ কয়েকটি ব্রাউজার, ফায়ারফক্স, ক্রোম, অর্থাত্ একই জিনিসও চেষ্টা করেছেন ... i.imgur.com/2f474kX.jpg
— স্কুটারলর্ড
2
আমি আজই সবেমাত্র সর্বশেষতম প্রকাশনা ডাউনলোড করেছি এবং যদি আমি ন্যূনতম সিএসএস ফাইল ব্যবহার করি তবে গ্লাইফগুলি প্রদর্শিত হয় না। আমি যদি 'সাধারণ' বুটস্ট্র্যাপ.এসএস ব্যবহার করি তবে সবকিছু ঠিকঠাক কাজ করে।
— আন্তোনিও
1
জুন 23, 2015 পর্যন্ত, সর্বশেষতম রিলিজ v3.3.5 ম্যাক্স্যাকডন অন্তর্ভুক্ত করুন আপনার কোনও ত্রুটি নেই
1
আমি দেখতে পেলাম যে আমি গ্লাইফিকনগুলি একটি সাদা পটভূমিতে ব্যবহার করছি এবং তাদের প্রদর্শিত হবে বলে আশা করছি। <I style = "color: black" class = "glyphicon glyphicon-new-window"> </ i> এটি স্থির করে ব্যবহার করা হয়েছে।
— বিজয় ভেকাকোমা

উত্তর:

478

আমার একই সমস্যা ছিল এবং এই পৃষ্ঠায় লুকানো মন্তব্য ছাড়া এটি সম্পর্কে কোনও তথ্য খুঁজে পাই না। আমার ফন্ট ফাইলগুলি ক্রোম অনুসারে ঠিক সূক্ষ্ম লোড হচ্ছে, তবে আইকনগুলি সঠিকভাবে প্রদর্শিত হচ্ছে না। আমি এটি একটি উত্তর করছি তাই আশা করি এটি অন্যদের সহায়তা করবে।

বুটস্ট্র্যাপ 3 এর কাস্টমাইজার সরঞ্জাম থেকে আমি ফন্ট ফাইলগুলি ডাউনলোড করেছি তাতে কিছু ভুল ছিল। সঠিক ফন্টগুলি পেতে বুটস্ট্র্যাপ হোমপেজে যান এবং পুরো .zip ফাইলটি ডাউনলোড করুন। সেখান থেকে চারটি ফন্ট ফাইলগুলি আপনার ফন্ট ডিরেক্টরিতে এক্সট্রাক্ট করুন এবং সমস্ত কিছু কাজ করা উচিত।

— জেফ
সূত্র
আপনি অনেক ঘন্টা বেদনা সঞ্চয় করেছেন। আমি ইতিমধ্যে এক ঘন্টা ব্যথা hadুকিয়ে দিয়েছি, তবে তারপরে আমি এখানে দেখার বিষয়ে ভাবছিলাম।
— ক্রিস্টিনা
6
getbootstrap.com হোমপেজের বুটস্ট্র্যাপ--.০.০ অন্তর্ভুক্ত ফাইলগুলির জন্য ফন্ট ফাইলগুলি অদলবদল করা। ভকভগক!
— মিশাল কোপেক
11
সঠিক উত্তর! কাস্টমাইজার থেকে ফন্ট ফাইল দূষিত!
— চার্লস ইংলস
2
আমি আমার "আমাকেও" প্রতিক্রিয়া যোগ করতে এবং বলতে চেয়েছিলাম যে কয়েক ঘন্টা প্রচেষ্টার অপচয় করার পরে এবং প্রায় আমার রাগ আমার ক্যারিয়ার ছাড়ার পরে, আমি এই উত্তরটি পেয়েছি এবং এখন আমি আবার গ্লাইফিকনগুলিতে কাজ করছি। ধন্যবাদ!!
— dohpaz42
2
সফল হওয়া সমস্ত ব্যক্তির অংশ হওয়ার জন্য আমি অপেক্ষা করতে পারি না তবে এখনই স্ট্যাকের প্রতিটি একক সমাধান এবং উত্তর চেষ্টা করেও আমি এখনও আইকনগুলি দেখতে অক্ষম। এমনকি আমি সম্পূর্ণ নতুন এমভিসি 5 অ্যাপ্লিকেশন শুরু করার চেষ্টা করেছি এবং বুটস্ট্র্যাপের সর্বশেষ সংস্করণ 3.3.7 ইনস্টল করতে নিউগেট ব্যবহার করে যা সমস্ত ফোল্ডার সঠিকভাবে ইনস্টল করে এবং ব্রাউজার ডিবাগার সরঞ্জামে 404 বা কোনও কিছুই দেখায় না যে ফন্টগুলি লোড হয়নি এবং আমি আপনাকে বলতে পারি যে স্প্যানের কোডটি নিখুঁত তাই আমার সমস্যা কোথায়। আমি সত্যই জানি না। আমি সমস্ত ব্রাউজারগুলি পরীক্ষা করে দেখেছি এবং আইকনগুলি কিছুই দেখায় না
— মার্ক রুসেল
235

পাঠকদের জন্য দ্রষ্টব্য: কাস্টমাইজারটিতে একটি বাগ সম্পর্কিত @ ব্যবহারকারী 2261073 এর মন্তব্য এবং @ জেফের উত্তর পড়তে ভুলবেন না । এটি সম্ভবত আপনার সমস্যার কারণ।

হরফ ফাইলটি সঠিকভাবে লোড হচ্ছে না। ফাইলগুলি তাদের প্রত্যাশিত স্থানে রয়েছে কিনা তা পরীক্ষা করুন।

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

ড্যানিয়েল দ্বারা নির্দেশিত হিসাবে, এটি একটি মাইমটাইপ সমস্যাও হতে পারে। ক্রোমের ডেভ সরঞ্জামগুলি ডাউনলোড করা ফন্টগুলি নেটওয়ার্ক ট্যাবে দেখায়:

ক্রোম নেটওয়ার্ক ট্যাব ফন্ট ডাউনলোড

— user247702
সূত্র
5
এবং মাইম টাইপগুলি সঠিকভাবে নিবন্ধিত হয়েছে।
— ড্যানিয়েল এ হোয়াইট
4
... যদিও আমি বুটস্ট্র্যাপ.জিপ ফাইল ডাউনলোড করার সময় ফাইলগুলি থাকা উচিত, তবুও আমি ডাবল-চেক করেছি এবং অরথিনগুলি তার জায়গায় রয়েছে। আমি
— মাইমটাইপস
1
@ ব্যবহারকারী 2261073 .eot ফাইলটি লোড করা উচিত নয়, যদি না আপনি ইন্টারনেট এক্সপ্লোরার ব্যবহার করছেন।
— ব্যবহারকারী 247702
46
দেখে মনে হচ্ছে সমস্যাটি খুঁজে পেয়েছি। বুটস্ট্র্যাপ কাস্টমাইজারটি উদাহরণস্বরূপ পুরো বুটস্ট্র্যাপ প্যাকেজের ভিতরে থাকা আকারের চেয়ে বিভিন্ন আকারের ফন্ট পাঠাচ্ছে বলে মনে হচ্ছে। আমি ফাইলগুলি প্রতিস্থাপন করেছি এবং এখন সবকিছু ঠিকঠাক চলছে। এটি সম্ভবত বুটস্ট্র্যাপের কাস্টমাইজারে কোনও বাগ আছে? কে জানে. আমি কি কোথাও এটি রিপোর্ট করতে পারি যাতে তারা এটি খতিয়ে দেখতে পারে?
— স্কুটারলর্ড
2
@ ব্যবহারকারী 2261073 আপনি এটি গিটহাব প্রকল্পে রিপোর্ট করতে পারেন। ইতিমধ্যে একটি সক্রিয় বাগ প্রতিবেদন বলে মনে হচ্ছে: github.com/twbs/bootstrap/issues/10008
— user247702
78

আমার ক্ষেত্রে আমি গ্লাইফিকনস-হাফওয়ালিংস-রেগুলার.ওয়ফের জন্য 404 এবং মোবাইল ব্রাউজারগুলিতে অ দৃশ্যমান গ্লাইফিকন পাচ্ছি।

দেখে মনে হচ্ছে woff এর জন্য MIME টাইপ সম্পর্কে কিছুটা বিভ্রান্তি রয়েছে, একাধিক MIME টাইপ বিভিন্ন ব্রাউজারগুলি গ্রহণ করেছে, তবে W3C বলেছেন :

application/font-woff

সম্পাদনা করুন: woff জন্য নিম্নলিখিত মাইম টাইপ পরীক্ষা করার পরে বর্তমানে সমস্ত ব্রাউজারে কাজ করে:

application/x-font-woff

সম্পাদনা করুন: বুটস্ট্র্যাপের সর্বশেষ সংস্করণে (3.3.5) একই প্রাথমিক ফলাফল সহ। ওফ 2 ফন্টগুলি ব্যবহার করে। ওফফ, ডাব্লু 3 সি এখনও অনুমিতিটি নির্দিষ্ট করে তবে এই মুহুর্তে মাইম টাইপটি মনে হয়:

application/font-woff2
— D.Rosado
সূত্র
17
এটি আমাকে ভাল দিকে নির্দেশ করেছে তবে এটি ক্রোমে আমাকে আরও একটি সতর্কবার্তা দিয়েছে ... application/x-font-woff
— মাইমির টাইপটি
ধন্যবাদ, আমার জন্য এটিই আসল সমস্যা ছিল। স্থানীয়ভাবে সবকিছু ঠিকঠাক কাজ করছিল তবে একবার Azure এ প্রকাশিত হয়েছিল। ওফ টাইপটি কেবল সমস্যা ছিল giving
— কেভিন ক্লোয়েট
56

-যদি আপনি সর্বাধিক রেট করা উত্তর অনুসরণ করেন এবং এখনও এটি কাজ করে না :

Fontফোল্ডারের হবে আপনার সিএসএস ফোল্ডারের মত একই স্তরের উপর হতে। পথে ফিক্সিংয়ের কাজ bootstrap.css হবে না ।

Bootstrap.cssFontsফোল্ডারে ঠিক এইভাবে নেভিগেট করতে হবে :

@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');
}
— CrazyPaste
সূত্র
3
আমি মনে করি 70% গ্লাইফিকন এই ক্ষেত্রে কাজ করে না, দুর্দান্ত উত্তর দেয়, আমি প্রায়শই বুটস্ট্র্যাপ সিএসএস ফাইলগুলি সিএসএস / বুটস্ট্র্যাপে রাখি। এগুলিকে কেবল
— সিএসএসে
1
আমার জন্য পথটি আপনার দ্বারা নির্ধারিত হিসাবে ঠিক দেখতে দেখতে কিন্তু এটি এখনও আমার কাজ করে না। উভয়ই উত্স প্যাকেজ ডাউনলোড এবং ফন্ট ফাইলগুলি প্রতিস্থাপন করে না। আমি অবশ্যই যুক্ত করব যে কিছু গ্লাইফিকন লোড হয় অন্যরা না করে। তুমি কি সাহায্য করতে পারো?
— দার্থ কোডার
আমার ফন্ট ফোল্ডারটি কোথায় নেই?
— সুইচ
এছাড়াও cssফোল্ডারটি আপনার এইচটিএমএল ফাইলযুক্ত ফোল্ডারের একটি সাবফোল্ডার হতে হবে। সুতরাং সর্বনিম্ন, আপনার কাছে থাকতে হবে ১) আপনার এইচটিএমএল ফাইল, ২) একটি সাবফোল্ডার নামক একটি সিএসএস ফাইল এবং)) একটি সাবফোল্ডারে ফোন করা cssফন্ট ফাইল fonts।
— কিভি শাপিরো
সিডিএন থেকে লোড করার সময় এটি কোনও পার্থক্য করে না; শুধুমাত্র স্থানীয়ভাবে লোড করার সময়। //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.cssআমার জন্য এটি সমাধান করার জন্য একটি লিঙ্ক যুক্ত করা ।
— জেমস উইলকিনস 21
47

যদি অন্য সমাধানগুলি কাজ না করে তবে আপনার জন্য সবকিছু করার জন্য বুটস্ট্র্যাপের উপর নির্ভর না করে আপনি কোনও বাহ্যিক উত্স থেকে গ্লিফিকনগুলি আমদানির চেষ্টা করতে পারেন। এটা করতে:

আপনি হয় এইচটিএমএল এ করতে পারেন:

<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")

এই থ্রেড থেকে এডসিওফিকে ক্রেডিট: বুটস্ট্র্যাপ 3 গ্লাইফিকন সিডিএন

— ক্রিস টিউডার
সূত্র
23

এখানে অন্য কেউ শেষ হয়েছে এবং বুটস্ট্র্যাপ> = v4.0 ব্যবহার করে: গ্লাইফিকন সমর্থন বাদ পড়েছে

রিলিজ নোট থেকে প্রাসঙ্গিক অংশ:

গ্লাইফিকন আইকন ফন্টটি ফেলে দেওয়া হয়েছে। আপনার যদি আইকনগুলির প্রয়োজন হয় তবে কয়েকটি বিকল্প হ'ল:

গ্লাইফিকনসের প্রবাহ সংস্করণ

Octicons

হরফ হরফ

সূত্র: https://v4-alpha.getbootstrap.com/migration/#compender

আপনি যদি গ্লাইফিকন ব্যবহার করতে চান তবে আপনাকে এটি আলাদাভাবে ডাউনলোড করতে হবে।

আমি ব্যক্তিগতভাবে ফন্ট আশ্চর্য চেষ্টা করেছিলাম এবং এটি বেশ ভাল। আইকন যুক্ত করা গ্লাইপিকন পদ্ধতির অনুরূপ:

<i class="fas fa-chess"></i>
— Caner
সূত্র
21

আমি আমার এই পুরানো প্রশ্নটি সন্ধান করছিলাম এবং যেহেতু এখন অবধি সঠিক উত্তর হওয়া উচিত ছিল, তা মন্তব্যগুলিতে আমার দ্বারা দেওয়া হয়েছিল, আমি মনে করি এটির কৃতিত্বও আমি প্রাপ্য।

সমস্যাটি মিথ্যা বলেছে যে বুটস্ট্র্যাপের কাস্টমাইজার সরঞ্জাম থেকে ডাউনলোড করা গ্লিকফিক ফন্ট ফাইলগুলি বুটস্ট্র্যাপের হোমপেজে পাওয়া পুনঃনির্দেশ থেকে ডাউনলোড করা ফাইলগুলির সাথে এক নয়। নীচের লিঙ্কটি থেকে ডাউনলোড করা যেতে পারে সেগুলি হিসাবে যা করা উচিত সেগুলি হ'ল:

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

পুরানো খারাপ কাস্টমাইজার ফাইলগুলির সাথে যে কোনও সমস্যা রয়েছে তার উপরের লিঙ্কটি থেকে ফন্টগুলি ওভাররাইট করা উচিত।

— scooterlord
সূত্র
কাস্টমাইজার সমস্যাটি অনেক আগেই ঠিক করা হয়েছিল। এটি এখনকার বুটস্ট্র্যাপে আর সমস্যা নেই।
— cvrebert
1
আজকাল, তারা সম্ভবত আইকন ফন্ট অবস্থানের সমস্যাগুলির মধ্যে চলেছে , যদিও আইকন ফন্টের পথগুলির কাজটি নথিভুক্ত করা হয়েছে ...
— cvrebert
এই সমস্যাটি পরীক্ষা করার জন্য কিছু নির্দিষ্ট জিনিস রয়েছে। - আপনার সাইটের জন্য পরীক্ষা করে দেখুন আইআইএস এই মাইম টাইপ .. এটা উপরের সমস্যাগুলির এক ... জন্য হতে হবে - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg
— pedram
আমার গ্লাইফিকনগুলি আইই বাদে সমস্ত ব্রাউজারে কাজ করে। IE তাদের প্রথম লোডে প্রদর্শন করে - F5 টিপুন এবং তারপরে আর প্রদর্শিত হবে না। DOM সঠিক, প্রয়োগ করা CSS সঠিক। আমি কোন সমাধান খুঁজে পাচ্ছি না। ধারনা?
— স্কাইচান
1
আমি "বিষয়বস্তু:" \ e080 "" সিএসএস যা সামগ্রীকে একটি নির্দিষ্ট চরিত্রে সেট করে তা চেক / আনচেক করতে পারি। যখন আমি এটি করি, স্প্যানটির আকার শারীরিকভাবে কোনও কিছু থেকে কিছুই এবং পিছনে পরিবর্তিত হয়। সুতরাং এটি সত্যিই আইই বাগের মতো অনুভব করে - চরিত্রটি আঁকতে ব্যর্থ।
— স্কাইচান
18

অ্যাজুর ওয়েবসাইটগুলি woff MIME কনফিগারেশন অনুপস্থিত । আপনাকে অবশ্যই ওয়েবকনফিগটিতে নিম্নলিখিত প্রবেশদ্বারটি যুক্ত করতে হবে

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration>
— আন্তন কালসিক
সূত্র
woff, woff2 and ttfএক্সটেনশনস?
— কুইকিনেট
16

@ স্টিজন বর্ণিত হিসাবে, 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');
}
— dball
সূত্র
1
আপনি যদি কম ব্যবহার করছেন তবে আপনি এটি আপনার কম ফাইলে ওভাররাইড করতে পারেন এবং আপনার জেনারেট সিএসএস ফাইল থেকে আপেক্ষিক পাথের সাথে মেলে বা সেগুলি রুট করতে URL টি পরিবর্তন করতে পারেন।
— ক্রিস সেরিলস
বুটস্ট্র্যাপের সর্বশেষতম প্রকাশের সাথে এটি আর কোনও সমস্যা হওয়া উচিত নয়। হালনাগাদ!
— ডবল
11

আপনি কোড এবং লাইন এই লাইন যোগ করতে পারেন।

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

ধন্যবাদ।

— ওয়াই জয় সিএইচ। সিংহ
সূত্র
এটি v3 এর পরবর্তী সংস্করণগুলিতে যুক্ত হওয়া অনেকগুলি নতুন আইকন অনুপস্থিত।
— জেমস উইলকিন্স
নিখুঁত উত্তর, যাইহোক আমার জন্য।
— thonnor
8

আইআইএস .woffডিফল্টরূপে ফাইলগুলি সার্ভার করবে না , সুতরাং আইআইএসে আপনাকে <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>
— স্টিভ কুপার
সূত্র
প্রতিটি আইআইএস মেশিনের জন্য এটি কনফিগার করার কথা মনে না রাখার পরিবর্তে এটি আরও বেশি ভাল করে। দুর্দান্ত উল্লেখ
— ম্যাটি বিয়ার
: আপনি বর্তমান মান অনুযায়ী "অ্যাপ্লিকেশন / ফন্ট-woff" হতে আপনার MimeType আপডেট করা উচিত stackoverflow.com/a/5142316/2267817
— সর্বদা শিক্ষণ
অ্যাপ্লিকেশন / হরফ বনাম বনাম অ্যাপ্লিকেশন / এক্স-ওফ ?
— কুইকিনেট
7

আপনার ফন্ট ডিরেক্টরিতে নীচের সমস্ত ফাইল রয়েছে? 

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
— ভিকি
সূত্র
এটা সঠিক উত্তর. একজন ব্যক্তি এই ফাইলগুলি স্থাপন করতে অধিকার ফোল্ডারের খুঁজে পেতে পারেন, Xenu লিঙ্ক অনুসন্ধানকারী ব্যবহার করছে: home.snafu.de/tilman/xenulink.html
— এনএভি
2
তবে, এমন কিছু লোক রয়েছে যাদের ফন্ট ফোল্ডারে এই সমস্ত ফাইল রয়েছে তবে মাইম টাইপ ওয়াফ আইআইএস-এ নিবন্ধিত না থাকলে এখনও এই ত্রুটিটি পাচ্ছেন।
— St00verflow
ফন্ট ডিরেক্টরি প্রয়োজন? আমার কাছে কেবল বুটস্ট্র্যাপ.এসএস এবং বুটস্ট্র্যাপ.জেএস আছে
— কুইকিনেট
7

আমি আমার কম পরিবর্তনশীল.বিহীন ফাইলটি পরিবর্তন করেছি file

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

আসল ছিল 

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

এটি একটি সমস্যা তৈরি করছিল

— সিজার হার্নান্দেজ
সূত্র
2
বুটস্ট্র্যাপ-সাস ৩.২.০.১ রত্নটির জন্য এটির প্রয়োজন মনে হয় $icon-font-path: "/assets/bootstrap/"।
— জোশুয়া মুহিম
বুটস্ট্র্যাপের সাথে কাজ করার অবশ্যই উপায় এবং এর বিপরীতে নয়।
— হ্যাম্পস্টার
6

এটি বুটস্ট্র্যাপ সিএসএস এবং বুটস্ট্র্যাপ.মিন সিএসএসে ভুল কোডিংয়ের কারণে is আপনি কাস্টমাইজার থেকে বুটস্ট্র্যাপ 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');
}

যেহেতু এটি গ্লাইফিকনগুলি ব্যবহারের জন্য প্রধান কোড, তাই এটি ...

সম্পূর্ণ প্যাকেজ থেকে সিএসএস-ফাইলগুলি ডাউনলোড করুন এবং এই কোডটি কার্যকর করা হবে।

— prinsen
সূত্র
6

এই কারণ ছিল, কেন আইকনগুলি আমার জন্য প্রদর্শিত হয়নি:

* {
    arial, sans-serif !important;
}

আমার এই অংশটি সরিয়ে দেওয়ার পরে CSS, সবকিছু যেমনটি করা উচিত ঠিক তেমন কাজ করেছিল। সমস্যাটি হ'ল সমস্যাটি হ'ল গুরুত্বপূর্ণ।

— জো স্মু
সূত্র
ধন্যবাদ! 4 ঘন্টা ধরে আমার মাথা আঁচড়ানোর পরে এবং বিভিন্ন বিভিন্ন জিনিস চেষ্টা করার পরে আমার মনে আছে যে আমি "স্প্যান" এ একটি ফন্ট যুক্ত করেছি গুরুত্বপূর্ণ। এটি সরানো হয়েছে এবং সবকিছু স্বাভাবিক অবস্থায় ফিরে এসেছে ..
— আলী হায়দার
5

আর একটি সমস্যা / সমাধান হতে পারে এই বুটস্ট্র্যাপ ২.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>
— TWiStErRob
সূত্র
5

নীচে এটি আমার জন্য স্থির করেছে। ফায়ারব্যাগ কনসোলটি ব্যবহার করে আমি "খারাপ ইউআরআই" ত্রুটি পেয়েছিলাম। আইকনগুলি E ### সংখ্যা হিসাবে প্রদর্শিত হচ্ছে। আমাকে আমার 'ফন্ট' ডিরেক্টরিতে একটি .htaccess ফাইল যুক্ত করতে হয়েছিল। <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> এর সম্ভাব্য সদৃশ: ফায়ারফক্সে ডাউনলোডযোগ্য ফন্ট: খারাপ ইউআরআই বা ক্রস-সাইট অ্যাক্সেসের অনুমতি নেই

— হারুন
সূত্র
5

এটি খুব দীর্ঘ অঙ্কুর, তবে এটি আমার ক্ষেত্রে এবং যেহেতু এটি এখানে ইতিমধ্যে নেই।

আপনি যদি এসএএসএস ব্যবহার করে টুইটার বুটস্ট্র্যাপ সংকলন করে থাকেন gulp-sassবা grunt-sassie। node-sass। আপনার নোড মডিউলগুলি আপ টু ডেট রয়েছে তা নিশ্চিত করুন, বিশেষত যদি আপনি কোনও পুরানো প্রকল্পে কাজ করছেন।

দেখা যাচ্ছে যে কিছু সময় আগে স্লাস নির্দেশিকা গ্লাইফিকনগুলিতে @at-rootসংজ্ঞা হিসাবে ব্যবহৃত হয় @font-face, দেখুন https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/styleshets/bootstrap/_ ।

এখানে গ্যাচা হ'ল node-sass। নির্দেশটি খুব পুরানো হলে libsassসমর্থন করবেন না @at-root। যদি এটি হয় তবে আপনি এমন একটি @font-faceমোড়ানো পাবেন @at-rootযা ব্রাউজারটির কী করবে সে সম্পর্কে কোনও ধারণা নেই। এর ফলস্বরূপ যে কোনও ফন্ট ডাউনলোড হবে না এবং আপনি সম্ভবত আইকনগুলির পরিবর্তে আবর্জনা দেখতে পাবেন।

— ভিক্টর হ্যাগকভিস্ট
সূত্র
4

দ্রষ্টব্য: নীচে সম্ভবত একটি কুলুঙ্গির দৃশ্য, তবে অন্য কেউ যদি এটির কাজে লাগে সে ক্ষেত্রে আমি এটি ভাগ করতে চেয়েছিলাম।

রেল প্রকল্পে আমরা একটি রত্নের মাধ্যমে বেশ কিছুটা ব্যবহার করছি যা রেল ইঞ্জিন ব্যবহার করছে 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এটি ব্যবহার করে কোনও সাধারণ রেল প্রকল্পে প্রয়োজনীয় হওয়া উচিত নয় , আমরা কেবলমাত্র প্রচুর মতামত পুনর্বার ব্যবহার করব এবং এটি আমাদের জন্য কার্যকর হয়েছিল। আশা করি এটি অন্য কাউকে সহায়তা করতে পারে।

— Kross
সূত্র
4

ফন্টগুলি রেন্ডারিং না করার বিষয়ে অফিসিয়াল ডকুমেন্টেশন যা বলে তা এখানে।

আইকন ফন্টের অবস্থান পরিবর্তন করা বুটস্ট্র্যাপ ধারন করে আইকন ফন্ট ফাইলগুলি সংকলিত সিএসএস ফাইলের তুলনায় ../font/ ডিরেক্টরিতে অবস্থিত। এই ফন্ট ফাইলগুলি সরানো বা নামকরণের অর্থ সিএসএসকে তিনটি উপায়ে একটি করে আপডেট করা: উত্সটিতে কম ফাইলগুলিতে @ আইকন-ফন্ট-পাথ এবং / অথবা @ আইকন-ফন্ট-নাম ভেরিয়েবলগুলি পরিবর্তন করুন। কম সংকলক দ্বারা সরবরাহিত আপেক্ষিক ইউআরএল বিকল্পটি ব্যবহার করুন। সংকলিত সিএসএসে url () পাথগুলি পরিবর্তন করুন। আপনার সুনির্দিষ্ট বিকাশ সেটআপের জন্য উপযুক্ত যে কোনও বিকল্পটি ব্যবহার করুন।

এটি ছাড়াও এটি হ'ল আপনি ফন্ট ফোল্ডারটি মূল ডিরেক্টরিতে অনুলিপি করতে পারেন নি

— দরজা
সূত্র
আমি ফন্ট ফোল্ডারটি অনুলিপি করতে মিস করেছি যা আমি জানি না এটি কোথায়? কেউ আমাকে সাহায্য করতে পারে?
— সুইচ
3

আমার এই সমস্যাটি ছিল এবং এটি ভেরিয়েবল.বিহীন ফাইলের কারণে ঘটেছিল। আইকন-ফন্ট-পাথ মান সেট করতে এটি ওভাররাইড করা সমস্যার সমাধান করে।

কাঠামোগত ফাইলটি দেখতে এমন দেখাচ্ছে:

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

আমার নিজস্ব ভেরিয়েবল.বিহীন ফাইলটি সামগ্রীর মূলে যুক্ত করা এবং এটি স্টাইলগুলিতে উল্লেখ করা less 404 ত্রুটির সমাধান করেছে।

ভেরিয়েবল.লেস রয়েছে:

@icon-font-path:          "fonts/";
— হারুন
সূত্র
এটি আমাকে বুঝতে সাহায্য করেছিল যে আমি আমার পথের পরিবর্তনশীলটিকে কূটকিয়ে দিয়েছি ... এলোমেলো তবে হ্যাঁ ধন্যবাদ!
— টেলর এ। লেচ
3

আমি নুগেট থেকে বুটস্ট্র্যাপ পেয়েছি। যখন আমি আমার সাইট প্রকাশ করি তখন গ্লাইফগুলি কাজ করে না।

আমার ক্ষেত্রে আমি প্রতিটি কন্টেন্টে ফন্ট ফাইলের জন্য বিল্ড অ্যাকশন সেট করে এটিকে 'সর্বদা অনুলিপি করুন' এ সেট করে কাজ করেছি।

— এরিক
সূত্র
3

গ্লাইফিকন-অ্যারো-ডাউনের জন্য আমার কাছে একটি বাক্স প্রস্থের কোড \ e094 ছিল, আসলে আমি সিএসএস ক্লাসে গ্লাইফিকন যুক্ত করার মতো সমস্যাটি সমাধান করেছি:

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

যদি এটি কাউকে সাহায্য করতে পারে ...

— পিয়েরে-অলিভিয়ের পিগনন
সূত্র
বাবু সিডিএন ব্যবহার করেও এটি আমার সমস্যা ছিল
— রিচার্ড বার্কার
3

উদাহরণস্বরূপ আপনি ফন্ট পরিবার নির্দিষ্ট করার চেয়ে বেশি নন নিশ্চিত করুন

*{font-family: Verdana;}

আই উপাদানগুলি থেকে অর্ধেকগুলি ফন্ট সরিয়ে ফেলবে।

— এস ..
সূত্র
3

ব্রাউজারটি ফন্ট ফাইলগুলি সন্ধান করতে না পারার ক্ষেত্রে আমার একই সমস্যা ছিল এবং আমার সমস্যাটি আমার .htaccess ফাইলে বাদ দেওয়ার কারণে যা ফাইলগুলি শ্বেত তালিকাভুক্ত করা হয়েছিল যা index.phpপ্রসেসিংয়ের জন্য প্রেরণ করা উচিত নয় should হরফ ফাইলটি লোড করা যায়নি বলে অক্ষরগুলি BLOB দ্বারা প্রতিস্থাপন করা হয়েছে।

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

আপনি দেখতে পাচ্ছেন যে চিত্রগুলি, আরএসএস এবং এক্সএমএল এর মতো ফাইলগুলি পুনর্লিখন থেকে বাদ দেওয়া হয়েছে তবে ফন্ট ফাইলগুলি .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হোয়াইটলিস্টে ফন্ট ফাইলগুলি লোড করা যায় এবং গ্লাইফিকনগুলি পরে সঠিকভাবে প্রদর্শন করা উচিত।

— worldofjr
সূত্র
2

আপনাকে অবশ্যই এই আদেশ দ্বারা সেট করতে হবে:

<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>
— Nenad
সূত্র
2

আমার জন্য যা কাজ করেছে তা রুটগুলি প্রতিস্থাপন করছে:

@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');
}
— তাবি ভিকুনা
সূত্র
2 
@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');}

আমি নেমস্পেস এবং গ্লাইফিকনগুলির সাথে কাজ করছে না তবে বুটস্ট্র্যাপ ব্যবহার করছি কোড গ্লাইফিকনগুলিতে সূক্ষ্মভাবে কাজ করার পরে উপরে লাইন যুক্ত করার পরে।

— রতন পল
সূত্র
2

আমি স্রেফ Ctrl + c, Ctrl + v ব্যবহার করে bootstrap.css থেকে ফন্টটির নামকরণ করেছি এবং এটি কার্যকর হয়েছে।

— Lanlan82
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.