Kendo UI移動自定義字體標籤條顏色不適用

我有一個自定義字體，這樣我可以在標籤條中有自定義圖標。當我使用我的字體時，圖標顯示，但它沒有使用css中指定的顏色。Kendo UI移動自定義字體標籤條顏色不適用

它顯示爲黑色。即使我直接在調試器中設置顏色，也不會應用顏色。

enter image description here

如果我使用在視圖中的圖標，它顯示了與正確的顏色：

enter image description here

我假定有一些類型的掩模的施加，但我不爲什麼它使它變黑。我至少想到，它與其他本地圖標顏色相同。

請注意，如果我更改所有圖標的顏色（使用km-icon css類），我的自定義圖標不會更改。

還請注意：當我調試，我看到的CSS告訴我，顏色應該是橙色：

enter image description here

CSS：

.km-ios6 .km-tabstrip .km-icon.km-icon-trophies 
{ 
    font-size: 22px; 
    margin-bottom: -7px; 
    color: orange !important; 
}

HTML：

<div data-role="footer"> 
     <div data-role="tabstrip"> 
      <a href="#tabstrip-home" data-icon="home">Home</a> 
      <a href="#tabstrip-journal" data-icon="icon-trophies">Journal</a> 
     </div> 
    </div>

來源

2013-10-11 Rick Kierner

看起來你正在使用的字體生成器正在設計:: before僞元素，而th是Kendo UI Mobile的元素，用於陰影。您應該設置:: after僞元素，如下所示：

[class^="km-icon-"]:after, [class*=" km-icon-"]:after { 
    font: 1em/1em "fishingfont"; 
    speak: none; 

    text-decoration: inherit; 
    width: 1em; 
    margin-right: .2em; 
    text-align: center; 

    /* For safety - reset parent styles, that can break glyph codes*/ 
    font-variant: normal; 
    text-transform: none; 

    line-height: 36px; 
    vertical-align: middle; 
    margin-left: .2em; 
    font-size: 22px; 
} 
.km-icon-gear:after { content: '\61'; } /* 'a' */ 
.km-icon-fish:after { content: '\62'; } /* 'b' */ 
.km-icon-journal:after { content: '\63'; } /* 'c' */ 
.km-icon-hole:after { content: '\64'; } /* 'd' */ 
.km-icon-trophies:after { content: '\65'; } /* 'e' */ 

.km-ios6 .km-tabstrip .km-state-active .km-icon, 
.km-content [class^="km-icon-"], .km-content [class*=" km-icon-"] 
{ 
    color: orange; 
}

來源

2013-10-16 06:36:48 Bundyo

Kendo UI移動自定義字體標籤條顏色不適用

回答

相關問題