Bootstrap 3 Glyphicons ไม่ทำงาน

ฉันดาวน์โหลด bootstrap 3.0 และไม่สามารถใช้ glyphicons ในการทำงานได้ ฉันได้รับข้อผิดพลาด "E003" บางประเภท ความคิดใด ๆ ว่าทำไมสิ่งนี้ถึงเกิดขึ้น? ฉันลองทั้งในประเทศและออนไลน์และฉันยังคงได้รับปัญหาเดียวกัน

ฉันมีปัญหาเดียวกันและไม่พบข้อมูลใด ๆ เกี่ยวกับเรื่องนี้ยกเว้นในความคิดเห็นที่ซ่อนอยู่ในหน้านี้ ไฟล์แบบอักษรของฉันโหลดได้ดีตาม Chrome แต่ไอคอนแสดงไม่ถูกต้อง ฉันทำคำตอบนี้หวังว่าจะช่วยคนอื่นได้

มีบางอย่างผิดปกติกับไฟล์แบบอักษรที่ฉันดาวน์โหลดจากเครื่องมือปรับแต่ง Bootstrap 3 ในการรับแบบอักษรที่ถูกต้องให้ไปที่หน้าแรกของ Bootstrapและดาวน์โหลดไฟล์. zip แบบเต็ม แตกไฟล์ฟอนต์สี่ไฟล์จากที่นั่นไปยังไดเร็กทอรีฟอนต์ของคุณและทุกอย่างจะทำงานได้

หมายเหตุถึงผู้อ่าน: อย่าลืมอ่านความคิดเห็นของ @ user2261073และคำตอบของ @ Jeffเกี่ยวกับบั๊กในเครื่องมือปรับแต่ง อาจเป็นสาเหตุของปัญหาของคุณ

ไม่ได้โหลดไฟล์แบบอักษรอย่างถูกต้อง ตรวจสอบว่าไฟล์อยู่ในตำแหน่งที่คาดหวังไว้หรือไม่

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

ตามที่ระบุโดยแดเนียลมันอาจเป็นปัญหาพิมพ์ดีด เครื่องมือ dev ของ Chrome แสดงแบบอักษรที่ดาวน์โหลดในแท็บเครือข่าย:

ในกรณีของฉันฉันได้รับ 404 สำหรับglyphicons-halflings-regular.woffและ glyphicons ที่มองไม่เห็นในเบราว์เซอร์มือถือ

ดูเหมือนว่ามีความสับสนเกี่ยวกับประเภท MIME สำหรับ woff มากกว่าหนึ่งประเภท MIME ได้รับการยอมรับโดยเบราว์เซอร์ที่แตกต่างกัน แต่W3C พูดว่า :

application/font-woff

แก้ไข: หลังจากการทดสอบประเภท MIME ต่อไปนี้สำหรับ woff ใช้ได้กับเบราว์เซอร์ทั้งหมดในปัจจุบัน:

application/x-font-woff

แก้ไข: Bootstrap เวอร์ชั่นล่าสุดในเวลานี้ (3.3.5) ใช้ฟอนต์. woff2 ที่มีผลเริ่มต้นเดียวกับ. woff W3C ยังคงกำหนดสเป็คแต่ในขณะนี้ประเภท MIME ดูเหมือนจะเป็น:

application/font-woff2

- หากคุณทำตามคำตอบที่ได้รับคะแนนสูงสุด แต่ก็ยังไม่ทำงาน :

Fontโฟลเดอร์ต้องจะอยู่ในระดับเดียวกับโฟลเดอร์ของ CSS การแก้ไขเส้นทางใน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');
}

หากโซลูชันอื่นไม่ทำงานคุณอาจต้องการลองนำเข้า Glyphicons จากแหล่งภายนอกแทนที่จะใช้ Bootstrap เพื่อทำทุกอย่างให้คุณ เพื่อทำสิ่งนี้:

คุณสามารถทำได้ใน HTML:

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

หรือ CSS:

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

ให้เครดิตแก่ edsiofi จากกระทู้นี้: Bootstrap 3 Glyphicons CDN

ในกรณีที่คนอื่นมาที่นี่และใช้ Bootstrap> = v4.0: การสนับสนุน glyphicon หลุดไป

ส่วนที่เกี่ยวข้องจากบันทึกประจำรุ่น:

วางแบบอักษรไอคอน Glyphicons ลดลง หากคุณต้องการไอคอนตัวเลือกบางอย่างคือ:

Glyphiconsเวอร์ชันต้นน้ำ

Octicons

ตัวอักษรยอดเยี่ยม

ที่มา: https://v4-alpha.getbootstrap.com/migration/#components

หากคุณต้องการใช้ glyphicons คุณต้องดาวน์โหลดแยกต่างหาก

ฉันลองใช้ Font Awesome เป็นการส่วนตัวแล้วมันค่อนข้างดี การเพิ่มไอคอนคล้ายกับวิธี glypicon:

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

ฉันกำลังดูคำถามเก่า ๆ ของฉันและเนื่องจากสิ่งที่ควรจะเป็นคำตอบที่ถูกต้องจนถึงตอนนี้ฉันได้รับความคิดเห็นจากฉันฉันคิดว่าฉันสมควรได้รับเครดิตสำหรับมันเช่นกัน

ปัญหาโกหกในความจริงที่ว่าไฟล์ฟอนต์ glyphicon ที่ดาวน์โหลดจากเครื่องมือตัวปรับแต่ง bootstrap นั้นไม่เหมือนกันกับไฟล์ที่ดาวน์โหลดจากการเปลี่ยนเส้นทางที่พบในหน้าแรกของ bootstrap สิ่งที่ทำงานตามที่ควรจะเป็นคนที่สามารถดาวน์โหลดได้จากลิงค์ต่อไปนี้:

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

ใครก็ตามที่มีปัญหากับไฟล์ Customizer ที่ไม่ดีเก่าควรเขียนทับแบบอักษรจากลิงค์ด้านบน

เว็บไซต์ Azure หายไปการกำหนดค่า MIME Woff คุณต้องเพิ่มรายการต่อไปนี้ใน web.config

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

ในฐานะที่เป็น @Stijn อธิบายที่ตั้งเริ่มต้นในการไม่ถูกต้องเมื่อติดตั้งแพคเกจนี้จากBootstrap.cssNuget

เปลี่ยนหัวข้อนี้เป็นดังนี้:

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

คุณสามารถเพิ่มบรรทัดของรหัสนี้และทำ

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

ขอบคุณ

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>

คุณมีไฟล์ด้านล่างทั้งหมดในไดเรกทอรีแบบอักษรของคุณหรือไม่

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

ฉันแก้ไขไฟล์ less.less น้อยของฉันฉันแก้ไขตัวแปร

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

เดิมคือ

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

มันทำให้เกิดปัญหา

นี่เป็นเพราะการเขียนโค้ดผิดพลาดใน bootstrap.css และ bootstrap.min.css เมื่อคุณดาวน์โหลด Bootstrap 3.0 จาก Customizer รหัสต่อไปนี้จะหายไป:

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

เนื่องจากนี่คือรหัสหลักสำหรับการใช้ Glyphicons มันจะไม่ทำงาน ...

ดาวน์โหลดไฟล์ css จากชุดเต็มและรหัสนี้จะถูกนำไปใช้

นี่คือเหตุผลทำไมไอคอนไม่แสดงขึ้นมาสำหรับฉัน:

* {
    arial, sans-serif !important;
}

หลังจากที่ฉันได้ลบส่วนนี้ของฉันCSSทุกอย่างทำงานเหมือนที่ควร สิ่งสำคัญคือสิ่งที่ทำให้เกิดปัญหา

ปัญหา / วิธีแก้ไขอื่นอาจมีรหัส Bootstrap 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>

ด้านล่างคือสิ่งที่แก้ไขให้ฉัน ฉันได้รับข้อผิดพลาด "URI ที่ไม่ดี" ที่ใช้ในคอนโซล Firebug ไอคอนแสดงเป็นตัวเลข E ### ฉันต้องเพิ่มไฟล์. htaccess ในไดเรกทอรี 'แบบอักษร' ของฉัน <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> เป็นไปได้ที่ซ้ำกันของ: แบบอักษรที่สามารถดาวน์โหลดได้บน firefox: URI ที่ไม่ดีหรือการเข้าถึงข้ามไซต์ไม่ได้รับอนุญาต

นี่เป็นการถ่ายทำที่ยาวนานมาก แต่มันเป็นกรณีของฉันและเนื่องจากมันไม่ได้อยู่ที่นี่แล้ว

หากคุณกำลังรวบรวม Bootstrap Twitter จาก SASS โดยใช้gulp-sassหรือgrunt-sassเช่น node-sass. ตรวจสอบให้แน่ใจว่าโมดูลโหนดของคุณทันสมัยโดยเฉพาะอย่างยิ่งหากคุณกำลังทำงานในโครงการที่ค่อนข้างเก่า

ปรากฎว่าในบางเวลากลับคำสั่ง SASS @at-rootถูกนำมาใช้ในคำนิยามของ@font-faceใน glyphicons ให้ดูhttps://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46 .

gotcha นี่คือนั่นnode-sassคือ libsassไม่สนับสนุน@at-rootคำสั่งถ้ามันเก่าเกินไป หากเป็นกรณีนี้คุณจะได้รับการ@font-faceห่อหุ้ม@at-rootซึ่งเบราว์เซอร์ไม่ทราบว่าจะทำอย่างไร ผลที่ตามมาคือไม่มีการดาวน์โหลดแบบอักษรและคุณอาจเห็นขยะแทนที่จะเป็นไอคอน

หมายเหตุ: ด้านล่างเป็นสถานการณ์เฉพาะ แต่ฉันต้องการแบ่งปันในกรณีที่คนอื่นอาจพบว่ามีประโยชน์

ในโครงการรถไฟเรากำลังนำอัญมณีที่ใช้เครื่องยนต์ Rails มาใช้bootstrap-sassใหม่ ทุกอย่างเป็นไปด้วยดีในโครงการหลักโดยมีข้อยกเว้นของการแก้ไขพา ธ แบบอักษร glyphicon

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เราเพิ่งจะใช้มุมมองมากมายและนี่ก็เป็นประโยชน์สำหรับเรา หวังว่านี่จะช่วยคนอื่นได้

นี่คือสิ่งที่เอกสารทางการบอกว่าเกี่ยวกับแบบอักษรที่ไม่แสดงผล

การเปลี่ยนตำแหน่งไอคอนตัวอักษร Bootstrap ถือว่าไฟล์ตัวอักษรไอคอนจะอยู่ในไดเรกทอรี ../fonts/ ซึ่งสัมพันธ์กับไฟล์ CSS ที่คอมไพล์แล้ว การย้ายหรือเปลี่ยนชื่อไฟล์ฟอนต์เหล่านั้นหมายถึงการอัปเดต CSS ในหนึ่งในสามวิธี: เปลี่ยนตัวแปร @ icon-font-path และ / หรือ @ icon-font-name ในไฟล์ Less Less ของแหล่งที่มา ใช้ประโยชน์จากตัวเลือก URL สัมพัทธ์ที่จัดทำโดย Less compiler เปลี่ยนเส้นทาง url () ใน CSS ที่คอมไพล์แล้ว ใช้ตัวเลือกใดก็ได้ที่เหมาะสมที่สุดกับการตั้งค่าการพัฒนาของคุณ

นอกเหนือจากนั้นอาจเป็นไปได้ว่าคุณพลาดที่จะคัดลอกโฟลเดอร์ฟอนต์ไปยังไดเรกทอรีราก

ฉันมีปัญหานี้และมันเกิดจากไฟล์แปรปรวน การแทนที่มันเพื่อตั้งค่าไอคอน-font-path แก้ปัญหาได้

โครงสร้างไฟล์มีลักษณะดังนี้:

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

การเพิ่มไฟล์แปรปรวนของฉันเองลงในรูทของเนื้อหาและการอ้างอิงสิ่งนี้ใน styles.less แก้ไขข้อผิดพลาด 404

Variables.less ประกอบด้วย:

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

ฉันได้รับ Bootstrap จาก NuGet เมื่อฉันเผยแพร่ไซต์ของฉันร่ายมนตร์ไม่ทำงาน

ในกรณีของฉันฉันใช้งานได้โดยการตั้งค่า Build Action สำหรับแต่ละไฟล์ฟอนต์เป็น 'เนื้อหา' และตั้งเป็น 'คัดลอกเสมอ'

ฉันมีรหัสความกว้างของกล่อง \ e094 สำหรับ glyphicon-arrow-down อันที่จริงฉันแก้ไขปัญหาที่เพิ่มglyphiconใน css class เช่นนั้น:

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

ถ้ามันสามารถช่วยใครบางคน ...

ตรวจสอบให้แน่ใจว่าคุณไม่ได้ระบุตระกูลแบบอักษรมากเกินไป

*{font-family: Verdana;}

จะลบฟอนต์ halflings ออกจากองค์ประกอบ i

ฉันมีปัญหาเดียวกันกับที่เบราว์เซอร์ไม่สามารถหาไฟล์ตัวอักษรและปัญหาของฉันเกิดจากการยกเว้นในไฟล์. 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]

อย่างที่คุณเห็นไฟล์ต่าง ๆ เช่นรูปภาพ rss และ 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ไปยังรายการที่อนุญาตอนุญาตให้โหลดไฟล์ฟอนต์และ glyphicons ควรแสดงอย่างถูกต้อง

คุณต้องตั้งค่าตามคำสั่งนี้:

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

สิ่งที่ใช้ได้ผลสำหรับฉันคือการเปลี่ยนเส้นทางจาก:

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

นี่คือวิธีที่คุณรวมไอคอนไว้ใน bootstrap 3

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

http://glyphicons.bootstrapcheatsheets.com/

หวังว่าจะช่วย

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

ฉันใช้ bootstrap กับเนมสเปซและ glyphicons ไม่ทำงาน แต่หลังจากเพิ่มบรรทัดด้านบนในโค้ด glyphicons ทำงานได้ดี

ฉันเพิ่งเปลี่ยนชื่อตัวอักษรจาก bootstrap.css โดยใช้ Ctrl + c, Ctrl + v และใช้งานได้