移動瀏覽器中的圖標顏色沒有變化

對於我的應用程序，我需要右鍵和下箭頭，我正在使用CSS Unicode，它應該是黃色，使用下面的示例代碼。不幸的是，它在桌面網頁瀏覽器上運行良好，而不是在移動瀏覽器上以灰色顯示右箭頭顏色。此問題僅在移動Chrome瀏覽器中出現。移動瀏覽器中的圖標顏色沒有變化

.closed::before { 
 
    content: "\25b6"; 
 
    color: #fe00f2; 
 
} 
 
.open::before { 
 
    content: "\25bc"; 
 
    color: #fe00f2; 
 
}

<p class="closed">My name is Donald</p> 
 
<p class="open">My name is Donald</p>

請幫我在整理這個問題。

2016-09-29 SRI

在鉻上看起來像是一個bug。解決方法是使用Font Awesome（http://fortawesome.github.io/Font-Awesome/icons/），它提供基於Web字體的圖標。好處是這些是可擴展的，並且看起來是相同的跨瀏覽器/設備。 – Dolphine

並將其作爲絕對位置，所以它不會改變td的高度。 –

嘗試'/25BA'而不是'/25B6'。我認爲這是你正在尋找的圖標。

HTML：

<p class="closed">My name is Donald</p> 
<p class="open">My name is Donald</p>

CSS：

.closed::before { 
    content: "\25ba"; 
    color: #fe00f2; 
} 
.open::before { 
    content: "\25bc"; 
    color: #fe00f2; 
}

注：我不知道爲什麼一個可以在另一個上工作，但Chrome和Safari似乎正確地對其進行了設計。此外，在您的示例中使用的顏色更多是粉紅色/紫色比黃色（如您的問題中所述），所以我繼續使用與您的示例中相同的顏色。

我建議您使用第三方圖標庫，如Font Awesome，正如您以前的評論者所述，但這超出了原始問題的範圍。

2016-09-29 20:10:45

回答