在Windows中的字體真棒丟失一個圖標

我目前正在使用Windows 7虛擬機在IE11中測試我的網站。我的網站使用字體真棒和glyphicons。除了單個圖標，所有圖標都按預期加載。在Windows中的字體真棒丟失一個圖標

<button type="submit"> 
    <i class="fa fa-cart-plus fa-2x"></i> 
</button>

Firefox和Chrome在我的Linux Mint機器上進行測試，所有圖標都能正確顯示。但Windows中的IE和Firefox都將此單個圖標顯示爲一個框。

enter image description here

我注意到，在Linux中，而.woff版本Windows中使用的是正在使用的.woff2文件。字體真棒CSS和字體在本地提供，而不是從CDN提供。這可能會有所作爲嗎？這個丟失圖標在font awesome's website上正確顯示。

我在堆棧溢出中發現了一些類似的答案，大多數都是舊的，我無法解決這個問題，因爲我甚至不知道從哪裏開始。我該如何解決這個缺失的圖標？

來源

2015-05-28 ecc

你有沒有試圖指出一個CDN，看看這是否能解決這個問題？ –

我做了，我的問題沒有解決，它跳過了它，我寧願服務器本地字體。 – ecc

在本地環境中也存在Chrome的這個問題（可能比這更多但不能被完全測試困擾） - 我懷疑最新版本已經搞亂了。

我已經建立了使用下面的FA-堆棧方法的版本，只需要一點點的CSS定位，但工作得很好：

HTML

<a role="button" class="btn btn-primary"> 
<span class="fa-stack"> 
<i class="fa fa-shopping-cart fa-stack-2x"></i> 
<i class="fa fa-plus fa-stack-1x fa-primary"></i> 
</span>&nbsp;New</a>

CSS

.fa-primary{ 
position: relative; 
color: #1a9dff; 
font-size: 0.5em !important; 
top:-4px; 
left:2px !important; 
}

編輯：我不得不調整css以用於FontAwesome的CDN版本 - 進一步懷疑下載包和CDN不匹配

See this codepen example

這將覆蓋您選擇的顏色的加號圖標在購物車圖標上。（編輯：我可憐的縮進道歉，第一次回答！）

我會指出，幾個月前，Bootstrap發生了類似的事情，我更新了核心文件從3.1.1到3.3.4 ），它完全摧毀了我的佈局，儘管使用bootstrap主頁上使用的CDN一切都很好，只是不能下載包。

基本上，有一點懸而未決，我相信他們會排序它，即使專業人士犯錯誤 - 使用相同的來源作爲工作的例子，直到下載包得到修復，如果你不顧一切地使用它。

來源

2015-06-02 14:03:18 DAustin

我喜歡你的想法。如果你願意添加一個最小工作示例來顯示你的圖標，我會接受這個答案。 – ecc

爾加 - 我應該是工作的：P讓我只需添加一個Bootply給我的答案 – DAustin

它不集中嘿嘿。但它會做的。 :)關於這個解決方案的好處是，它允許你按你想要的方式創建你的添加按鈕。我有點不喜歡默認的樣子。此外，你的例子沒有工作，因爲它缺乏字體真棒。我只想要答案是完整的:)謝謝 – ecc

您可以在您的網頁使用CSS

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

來源

2015-05-28 12:25:48

你在Linux上的服務字體真棒字體文件的舊版本VS Windows機器。此圖標（fa-cart-plus）僅在v4.3（http://fortawesome.github.io/Font-Awesome/icon/cart-plus/）中可用。確保兩臺機器都可以正常使用4.3字體文件，並且它可以正常工作。

CDN總是有用，但它不會告訴你問題的根本原因。

來源

2015-05-28 12:29:49 Adam

使用CDN工作，但它有不必要的外部樣式表的額外請求。我使用bower安裝了fontawesome，版本是4.3.0，現在是最新版本。我會嘗試從源代碼下載所有內容。 – ecc

但你是對的。來自4.3更新的所有圖標在這裏不起作用。 – ecc

在Windows中的字體真棒丟失一個圖標

回答

相關問題