這篇文章給大家分享的是有關bootstrap圖標無法顯示的原因是什么的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供東安網(wǎng)站建設、東安做網(wǎng)站、東安網(wǎng)站設計、東安網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、東安企業(yè)網(wǎng)站模板建站服務，十多年東安做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

如果不注意bootstrap引入css和fonts的規(guī)范，則可能會導致bootstrap在顯示glyphicon圖標時無法正常顯示，顯示為方框。

發(fā)現(xiàn)不能顯示之后我使用了goole cdn上的地址引入bootstrap文件，發(fā)現(xiàn)可以正常顯示。所以問題應該出現(xiàn)在引入文件這里。
ctrl+左鍵進入glyphyicon，發(fā)現(xiàn)實現(xiàn)的代碼是這樣的：

@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中就會發(fā)現(xiàn)@font-face這部分報紅，提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot，意思是找不到文件。

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

所以glyphyicon這個樣式，必須要關聯(lián)到glyphicons-halflings-regular.eot等文件才能正常使用。通常出錯是因為路徑不正確所致。

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

感謝各位的閱讀！關于bootstrap圖標無法顯示的原因是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享標題：bootstrap圖標無法顯示的原因是什么-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/dshjss.html