內容忽略之前的僞元素在瀏覽器中

我有這個基本的問題，我現在想解決一段時間。我正在用盡所有想法。內容忽略之前的僞元素在瀏覽器中

我有一個css僞元素之前，我是這樣的樣式。

#fPhone::before{ 
    color: #78be20; 
    content: "\e622"; 
    font-family: icons; 
}

但在瀏覽器，它只是打印出622當我檢查僞標籤，我看到

content: "e622";

如果我嘗試在它的工作原理，調試器，但由於某種原因，加上「\」不從CSS中撿起來。

我用完了可能導致此問題的原因。

來源

2015-10-29 user3861559

你可以打一個比方片段演示了這個問題？它不會發生在[這個小提琴]（http://jsfiddle.net/MrLister/ceh82vz0/）中，所以必須有一些背景會阻礙。 –

不是。它的圖標字體看起來像手機。當我在調試器中添加「\」時，它正確顯示爲 – user3861559

另外，我懷疑我能夠爲它創建一個片段，因爲我已經擁有自己的svg ttf和woff文件的font-family：圖標 – user3861559

確定您正確導入了圖標字體並且使用了正確的十六進制代碼？下面證明，它的作品，你可能期望......

@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
#fPhone::before{ 
 
    color: #78be20; 
 
    content: "\e0cd"; /* different code, but same effect */ 
 
    font-family: 'Material Icons'; 
 
} 
 

 
/* class is pre-defined in @import (default <parent>color, 24px)*/ 
 
.material-icons { color: #78be20; font-size: 16px; } 
 

 
/* 
 
    find the codes and ligatures for Material Icons at: 
 
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints 
 

 
*/

<div id="fPhone"> a phone</div> 
 
<div><i class="material-icons">phone</i> using ligature name</div>

來源

2015-10-29 23:27:58

當然，這是有效的。但問題在於導入字體或正確的十六進制代碼是值得懷疑的。這兩者都不能解釋爲什麼顯然「內容：」\ e622「'被破壞到'e622'或'622'。 –

這是一條評論，而不是答案。它所做的只是說「看起來有效」，就像上面的第一條評論一樣。 –

@Mr李斯特，也許不是你可能會喜歡的人，但是這是給用戶3861559的，因爲他以前的評論和建議沒有改變/反應。現在，偶爾的路人可以至少讀取它是正確的方法，並且用戶3861559有他可以嘗試的替代圖標字體。所以，請不要進入語義討論。 –

內容忽略之前的僞元素在瀏覽器中

回答

相關問題