為什么使用bootstrap的圖標會無法顯示

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

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

發現不能顯示之后我使用了goole cdn上的地址引入bootstrap文件，發現可以正常顯示。所以問題應該出現在引入文件這里。ctrl+左鍵進入glyphyicon，發現實現的代碼是這樣的：（推薦學習：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中就會發現@font-face這部分報紅，提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot，意思是找不到文件。

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

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

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

以上是“為什么使用bootstrap的圖標會無法顯示”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！