Icomoon自定義字體多種顏色

Question

我使用Icomoon創建自定義的字體圖標，我遇到這樣的情況，以圖標需要在同一個範圍，如：

<span class="glyph2" aria-hidden="false" data-icon="&#xe000; &#xe001;"></span> 

但他們都需要有不同的顏色。有沒有可能做到這一點？

而這裏的JSFIDDLE包含所有的代碼，但我似乎無法得到在jsfiddle工作的自定義字體。

任何幫助非常感謝。

Answer 1

我不認爲這是可能的只使用數據圖標屬性。

您可以改用IcoMoon的icon-類，並使用before CSS僞選擇器和after選擇器。

icon1:before { 
    content: "A"; 
    color:red; 
} 

.icon2:after { 
    color: blue; 
    content: "B"; 
} 

我已經在Fiddle中證明了這一點。

Answer 2

我還沒有能夠證明在小提琴中，但它看起來可以工作。

IcoMoon的樣式爲：在僞選擇器之前。根據css，第一個字母的僞選擇器應該適用於生成的內容，因此包括：before數據。

因此，包括

.glyph2:first-letter {background-color: blue; color:white} 

你應該能夠給這個外觀的第一個圖標（ 生成：2個自定義字符僞元素之前）。

它在我當地工作，但我無法讓它在小提琴中工作。