自定義字體不適用於：在僞元素在CSS之前

Question

我有CSS內容值的問題。它根本不顯示，只是代碼，就像圖片中一樣。任何人都可以解釋導致它的原因嗎我會嘗試修復它，而不在此處發佈代碼。

HTML：

<a href="#"><i class="icon-map-marker"></i> Atlanta</a> 

CSS：

.icon-map-marker:before{ 
    content: "\f041" 
} 

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('fontawesome-webfont.eot'); 
    src: url('fontawesome-webfont.eot') format('embedded-opentype'), 
     url('fontawesome-webfont.woff?') format('woff'), 
     url('fontawesome-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0 0; 
    background-repeat: repeat; 
    margin-top: 0 
} 

Answer 1

這是通過不被在用於顯示它的字體定義的字符而引起的。而是顯示佔位符。在Font Awesome中，fa-map-marker character處於該位置。

顯然font-family: FontAwesome不用於:before僞元素。它沒有設置，字體不可用，或者瀏覽器錯誤被觸發。我假設沒有使用其他CSS規則（否則可能會在層疊中的某處進行覆蓋）。

font-family: FontAwesome未設置？

:before是「之前」元素的子元素，所以它正確繼承font-family。父母有font-family: FontAwesome，除非規則無效，情況並非如此。因此問題不在這裏，它必須是字體不可用。

要絕對確保，請嘗試更改爲:before規則

.icon-map-marker:before { 
    content: "\f041"; 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
} 

，看看現在的字符顯示OK。

FontAwesome font family無法使用？

字體無法下載，被破壞或@font-face at-rule無效。

規則似乎對我完全有效。我只是想知道，爲什麼WOFF路徑後的問號？我認爲這是舊IE瀏覽器（<9）之後的遺留問題，但它應該不會造成任何傷害。

檢查下載正確字體文件的能力取決於您。您可以通過嗅探網絡流量來驗證該字體是否已加載，例如使用Firebug或LiveHTTPHeaders（但請務必使用您的字體並通過Ctrl + F5重新加載跳過緩存）。

我認爲你的問題是一個瀏覽器錯誤。你沒有指定使用哪個版本的瀏覽器，所以我不能說更具體的東西。您可以使用CSS from the CDN。或者按照同一網站上的說明操作即可使用Font Awesome。您也可以自己閱讀bulletproof @font-face的更多信息，但是您需要在您想要支持的瀏覽器中跟上@font-face的當前實施狀態。的fa-map-marker在:before使用CSS從CDN

快速測試插入此爲您的位置吧：

javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta' 

的\\需要，而不是\ JavaScript字符串內。該字符串是一個有效的HTML5文檔。

旁註

U+F041是range reserved for private use一個字符。因此對於此代碼點，因此different fonts可能具有不同的字符。

也許最好是使用更多的類而不是二合一。使用icon和map-marker可以簡化您的選擇器，並告訴您您的類可能更具語義。使用CSS預處理器可以讓你編寫更低級的純語言單元的語義類city。

您的HTML標記是可怕的。它非常想要滿足您的表達要求，但HTML應該標記出與表示無關的結構。你爲什麼不使用<a href="#" class="icon-map-marker">Atlanta</a>？

Answer 2

可能是您的瀏覽器的緩存問題，請嘗試在文件名旁邊添加版本號。

@font-face { 
font-family: 'FontAwesome'; 
src: url('fontawesome-webfont.eot?v1'); 
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'), 
    url('fontawesome-webfont.woff?v1') format('woff'), 
    url('fontawesome-webfont.ttf?v1') format('truetype'); 
font-weight: normal; 
font-style: normal 

}