首頁 >web前端 >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相關技術文章,請造訪Bootstrap教學欄位進行學習!
以上是為什麼bootstrap圖示無法顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!