[Web] 修正 Bootstrap 無法顯示圖示 (Glyphicons) 的問題 @ 小攻城師的戰場筆記

最近開始用 Bootstrap，這是近年非常流行的排版 framework。其中的圖示元件 (Glyphicons) 使用了網路字型、SVG 等多種方式來呈現小圖示，只要修改 css class 就可以得到不同大小、圖案的按鈕，做按鈕不求人，超方便。

可是我才剛開始用就遇到很幼幼班的問題：為什麼在 IE8/IE9 沒辦法顯示圖示內容？我在 Firefox & Chrome 看都很正常啊。

有的人說是因為透過自訂下載 (customizer tool)，裡頭打包的字型檔是錯的，可是我一開始就是下載完整版本而非自訂版本耶。同一個討論串裡也有人說可能是 CSS 裡頭字型檔的相對路徑寫錯了，可是我打開 IE 的開發者工具，字型根本沒被下載呀。

再查了一下，看到 "Glyphicons not working in IE8 #9962"，這篇裡有人提到應該為 IE 引入 glyphicons 相關的 CSS：

<linkrel="stylesheet"media="screen"href="/css/glyphicons/glyphicons.min.css">

加上去就沒事了。打完收工。

結果我看錯了。 XD

我是在本機 (localhost) 可以看到 glyphicons，程式上傳到 server 後連過去就看不到。本來以為解決了，結果只是我在 IE 看錯 tab，噗。上面的解法是針對 Bootstrap 2，我抓的是 Bootstrap 3，不適用。

認真想了幾種可能：

MIME type 沒設。
但是同一台 server 上也有別的程式用到 Bootstrap，其他程式執行正常，我也確認過 Apache 的 mime.types 裡有相關設定了。
可能是 Bootstrap 3.2 版特殊的 bug。

所以我用 "bootstrap 3.2 ie glyphicon" 當關鍵字搜尋一下，找到這篇："bootstrap 3.2.0 glyphicons are not displaying in internet explorer"。

The Problem was, that somehow my IE went in a certain security state, in which the font download was disabled.

So I changed the Custom level of the "protected Mode" - you can find that in the Security Tab of the Internet Options Menu.

After you click on the "Custom level..." Button you have to search for "font download" and change it to "enable".

簡單來說問題就是 IE 的預設值是不自動下載網路字型的。所以要到「設定→網際網路選項→安全性」，選擇要設定安全性的區域後，點選「自訂等級」，確定字型下載的設定值是「啟用」。