Internet Explorer 9上的零星字體圖標

Question

我有一個網站在兩個不同的頁面上使用Glyphicons和Font-Awesome字體圖標，具有相同的行爲：圖標不顯示在IE9中，但在Chrome/Firefox中完美工作。

事情做工作：從外部CDN

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 

• 加載圖標加載字體真棒CSS /字體從外部CDN使圖標可靠地工作。不幸的是，這個網站是用於內聯網的，並且不能上網。 這是一個不行。

  • 通過重定向

  出於某種原因，加載頁面，每當我重定向到一個頁面中，IE9中止GET荷蘭國際集團的一些CSS文件，只有在事後重新加載它們。

  在這種情況下，圖標按預期顯示。所以我猜猜這些不正常的請求是相關的。但以正常方式加載頁面會導致圖標消失，並且正常加載css。 如果有人能向我解釋這件事，那會很棒。

事情不工作：

• 配置服務器設置Content-Type正確的字體文件。我匹配的CDN使用的MIME類型，所以即使我有錯誤的價值觀，也不會解決這個問題
• 關閉compatibility view在IE
• 降低IE security settings
• 添加html5shiv/respond.js到頁面（html5shiv）
• 將font-awesome css文件移動到頁面上的其他位置。

• 手動加載​​eot字體文件的網頁上，像這樣：

  <link rel="stylesheet" type="application/vnd.ms-fontobject" href="/some/absolute_path/fonts/glyphicons-halflings-regular.eot"/> 
  

事情我已經看了看：

這些可能會或可能不會有幫助，但似乎代表事物的狀態。

• compatibility view
• security settings
• html5shiv
• 壞重定向問題：
  • Unsolved SO question
  • Unsolved MSDN question

Answer 1

這看起來像是在github上爲Font Awesome報告的bug。看看thorst's solution它似乎爲大多數人解決它。

對於鏈接恐懼症：

I had to change font-awesome.css 

來源：

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); 

要：

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');