2014-01-28 337 views
2

我們正在使用圖標font-face在我們的網站上顯示社交媒體圖標,但它們在IE8中顯示不正確。自定義圖標字體在IE8上無法正常工作

奇怪的是,雖然,他們表現出了罰款我們的測試服務器上,只是沒有在該網站是活的,因爲在這裏可以看到 -

測試服務器
Icons on our test server
Live服務器
Icons on the live server

我猜服務器配置可能是這裏的罪魁禍首,但我真的不知道該找什麼。有誰知道可能是什麼原因造成的?謝謝。

這裏是我的CSS使用,通過IcoMoon產生 -

@font-face{ 
    font-family: 'DD_Icons'; 
    src: url('fonts/DD_Icons.eot'); 
} 
@font-face{ 
    font-family: 'DD_Icons'; 
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), 
     url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

.icon-facebook:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e601"; 
} 
.icon-twitter:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e602"; 
} 
.icon-google-plus:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e603"; 
} 
.icon-feed:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e604"; 
} 
.icon-linkedin:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e605"; 
} 
.icon-DD-Options:before{ 
    font-family: "DD_Icons" !important; 
    content: "\e600"; 
} 

回答

0

無論是網絡被帶到阻止這種外部文件(文件類型,可能)或網絡策略正在將其作爲IE配置進行阻止。

這發生在我身上的一個網站,我們正在爲我們的一個大客戶建造。他們的IE9被鎖定。

但是,爲了記錄,您可以在IE8中使用圖標字體。我們一直這樣做。在IE8中查看此頁面:http://fontawesome.io/whats-new/

我相信鏈接文章中說僞元素和圖標字體不一起工作的原因是因爲他試圖爲實際字母實現圖標字體 - 即內容:「A」 。

然而,順便看看FontAwesome實現這些幕後:

<span class="icon-home"></span> 

變爲:

.icon-home:before { 
    content: "\e900"; 
} 

這\ E900是private use area of Unicode的一部分。這意味着,如果.woff或。 eot文件被阻止,你看到,而不是一個符號。

但是,您可以使用像http://icomoon.io這樣的工具來選擇要使用的圖標並將其自定義以使用,而不是使用與目標圖標類似的不同unicode值。

這個頁面(http://unicode.johnholtripley.co.uk/all/)被證明對於這個努力非常有價值。

.icon-home:before { 
    content: "\2602"; 
} 

變成&#x2602;如果字體文件被阻止。

相關問題