文章轉(zhuǎn)載自：http://blog.csdn.net/nongweiyilady/article/details/53611094
以下是原文，簡單來說解決辦法就是：直接在項目中引入fonts文件夾就可以了，無需多余操作，引入/css/bootstrap.min.css樣式文件時boostrap會自動尋找fonts文件夾下的字體圖標(biāo)
你在使用bootstrap字體圖標(biāo)的時候，是否遇到引用本地Bootstrap文件無法顯示字體圖標(biāo)，而使用CDN服務(wù)器上bootstrap卻能正常顯示的問題。
在不能正常顯示的時候，比如我要在一個按鈕中使用一個√的字體圖標(biāo)，我的代碼是這樣子的：
[html] view plain copy
print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap字體圖標(biāo)</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>
但是他的顯示卻是這個樣子的：
網(wǎng)上查找了很多解決辦法，說法不一。下面來看看我是如何解決的。
發(fā)現(xiàn)不能顯示之后我使用了goole cdn上的地址引入bootstrap文件，發(fā)現(xiàn)可以正常顯示。所以問題應(yīng)該出現(xiàn)在引入文件這里。
ctrl+左鍵進(jìn)入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這個樣式，是關(guān)聯(lián)著這些文件的，進(jìn)入到下載的整個的壓縮包，進(jìn)入這個文件bootstrap-3.3.7-dist\fonts，就會發(fā)現(xiàn)如下文件：
，所以glyphyicon這個樣式，必須要關(guān)聯(lián)到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中，我是這樣引用的，可能你也正在犯跟我一樣的錯誤：
<link rel="stylesheet" href="../libs/bootstrap.css">
在webstrom中看到我的libs目錄是這樣的：
是的，在使用bootstrap的大多樣式的時候，單單是bootstrap.css這個文件就夠了，不必引入全部的，這樣可以讓我們的項目沒那么臃腫。但是在我們使用字體圖標(biāo)的時候，是需要關(guān)聯(lián)到字體圖標(biāo)相關(guān)的文件才得以實現(xiàn)的，所以當(dāng)我引入整個bootstrap-3.3.7（您也可以部分引入，只要將你想要的功能的相關(guān)文件全部引入且目錄無誤即可），然后再在我的html中這樣引入：
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
這樣就能夠正常顯示字體圖標(biāo)：
總結(jié)：分析了那么多，意思就是字體圖標(biāo)這個樣式的實現(xiàn)，需要關(guān)聯(lián)到glyphyicon相關(guān)文件，你在引入bootstrap.css文件時，你要確保在與bootstrap.css的相對路徑下，能夠讓他找到這些關(guān)聯(lián)文件，而CDN服務(wù)器上的正式如此，如此才能讓圖標(biāo)正常顯示。
