Bootstrap—解決引入本地Bootstrap檔案字型圖示無法顯示問題
你在使用bootstrap字型圖示的時候，是否遇到引用本地Bootstrap檔案無法顯示字型圖示，而使用CDN伺服器上bootstrap卻能正常顯示的問題。
在不能正常顯示的時候，比如我要在一個按鈕中使用一個√的字型圖示，我的程式碼是這樣子的：
但是他的顯示卻是這個樣子的：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字型圖示</title> <link rel="stylesheet" href="../libs/bootstrap.css"> </head> <body> <div class="container"> <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button> </div> </body> </html>
網上查找了很多解決辦法，說法不一。下面來看看我是如何解決的。
發現不能顯示之後我使用了goole cdn上的地址引入bootstrap檔案，發現可以正常顯示。所以問題應該出現在引入檔案這裡。
ctrl+左鍵進入glyphyicon，發現實現的程式碼是這樣的：
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix'在idea中就會發現@font-face這部分報紅，提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot，意思是找不到檔案。) 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; }
所以glyphyicon這個樣式，是關聯著這些檔案的，進入到下載的整個的壓縮包，進入這個檔案bootstrap-3.3.7-dist\fonts，就會發現如下檔案：
，所以glyphyicon這個樣式，必須要關聯到glyphicons-halflings-regular.eot等檔案才能正常使用。
而在我的引用bootstrap檔案中，我是這樣引用的，可能你也正在犯跟我一樣的錯誤：
<link rel="stylesheet" href="../libs/bootstrap.css">在webstrom中看到我的libs目錄是這樣的：
是的，在使用bootstrap的大多樣式的時候，單單是bootstrap.css這個檔案就夠了，不必引入全部的，這樣可以讓我們的專案沒那麼臃腫。但是在我們使用字型圖示的時候，是需要關聯到字型圖示相關的檔案才得以實現的，所以當我引入整個bootstrap-3.3.7（您也可以部分引入，只要將你想要的功能的相關檔案全部引入且目錄無誤即可），然後再在我的html中這樣引入：
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">這樣就能夠正常顯示字型圖示：
總結：分析了那麼多，意思就是字型圖示這個樣式的實現，需要關聯到glyphyicon相關檔案，你在引入bootstrap.css檔案時，你要確保在與bootstrap.css的相對路徑下，能夠讓他找到這些關聯檔案，而CDN伺服器上的正式如此，如此才能讓圖示正常顯示。