小編給大家分享一下為什么使用bootstrap的圖標(biāo)會(huì)無(wú)法顯示，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專(zhuān)注骨干網(wǎng)絡(luò)服務(wù)器租用十余年，服務(wù)更有保障！服務(wù)器租用，服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪(fǎng)問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專(zhuān)屬高性能服務(wù)器。

如果不注意bootstrap引入css和fonts的規(guī)范，則可能會(huì)導(dǎo)致bootstrap在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示，顯示為方框。

發(fā)現(xiàn)不能顯示之后我使用了goole cdn上的地址引入bootstrap文件，發(fā)現(xiàn)可以正常顯示。所以問(wèn)題應(yīng)該出現(xiàn)在引入文件這里。ctrl+左鍵進(jìn)入glyphyicon，發(fā)現(xiàn)實(shí)現(xiàn)的代碼是這樣的：（推薦學(xué)習(xí)：Bootstrap視頻教程）

@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.woff2') format('woff2'), 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');}.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

在idea中就會(huì)發(fā)現(xiàn)@font-face這部分報(bào)紅，提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot，意思是找不到文件。

所以glyphyicon這個(gè)樣式，是關(guān)聯(lián)著這些文件的，進(jìn)入到下載的整個(gè)的壓縮包，進(jìn)入這個(gè)文件bootstrap-3.3.7-dist\fonts，就會(huì)發(fā)現(xiàn)如下文件：

所以glyphyicon這個(gè)樣式，必須要關(guān)聯(lián)到glyphicons-halflings-regular.eot等文件才能正常使用。通常出錯(cuò)是因?yàn)槁窂讲徽_所致。

分析了那么多，意思就是字體圖標(biāo)這個(gè)樣式的實(shí)現(xiàn)，需要關(guān)聯(lián)到glyphyicon相關(guān)文件，你在引入bootstrap.css文件時(shí)，你要確保在與bootstrap.css的相對(duì)路徑下，能夠讓他找到這些關(guān)聯(lián)文件，而CDN服務(wù)器上的正式如此，如此才能讓圖標(biāo)正常顯示。

以上是“為什么使用bootstrap的圖標(biāo)會(huì)無(wú)法顯示”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：為什么使用bootstrap的圖標(biāo)會(huì)無(wú)法顯示-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://aaarwkj.com/article22/dpiocc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、小程序開(kāi)發(fā)、ChatGPT、域名注冊(cè)、網(wǎng)站營(yíng)銷(xiāo)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)