原文：https://www.jianshu.com/p/70ac459d33e7
作爲Bootstrap的初學者，我最近遇到了一個問題：在使用Bootstrap字體圖標時，圖標不可見。使用代碼如下：
<span class="glyphicon glyphicon-ok"></span>
在網頁上的顯示結果如下：
OK圖標沒有顯示出來
我的Bootstrap文件是下載到本地使用的，引用代碼正確，其他功能正常使用。後來，看了網上的建議，使用遠程引用Bootstrap文件能夠解決問題，即在引用代碼時，使用：
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
在網頁上顯示的結果果然正確了，如下：
OK圖標正常顯示
那麼爲什麼本地引用不能正常顯示圖標，而遠程引用能夠正常顯示呢？後來我終於知道了答案，並且找到了解決辦法。
首先，還是使用本地引用Bootstrap文件，即：<link rel="stylesheet" href="css/bootstrap.css">，此時，我的文檔結構是這樣的：
文檔結構
整個網頁代碼在t1.html中編寫。
其次，對於t1.html中的代碼，
<span class="glyphicon glyphicon-ok"></span>，我按住command鍵(我用的是mac，IDE是WebStorm，Windows用於應該按住ctrl鍵），鼠標點擊glyphicon，找到它引用的Bootstrap中的原始代碼，結果如下：
glyphicon在Bootstrap中引用的源代碼
此時，大家注意到沒有，@font-face中的../fonts/glyphicons-halflings-regular.eot等兩個文件有紅色的下劃線，我鼠標移動到上面，WebStorm給的提示是：can't resolve file glyphicons-halflings-regular.eot。現在，問題已經相當明顯了，就是我本地缺失字體引用文件。
問題清楚了，解決辦法就簡單了。大家在官網上下載Bootstrap的源文件包中，肯定包含一個fonts的文件夾，其中有5個文件，如下：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.woff2
glyphicons-halflings-regular.ttf
源包下載地址：輸入https://getbootstrap.com/ ----> 選擇版本3.3.7 ---->然後下載（其中就有font文件）
如圖所示：
![]()
解決辦法就是將fonts文件夾複製到我的代碼文檔中，與bootstrap.css的父文件夾同級，如下圖所示：
增加了fonts文件夾後的文檔結構
一切順利，此時我能夠在網頁上看到我引用的圖標了：
本地圖標正常顯示
總結：在遠程引用Bootstrap文件時，很多細節都被遮蔽住了，本地引用Bootstrap文件能夠暴露與解決很多問題，值得慢慢研究。