Kendo UI Мобильный пользовательский шрифт цвет полоски не применяется

Question

У меня есть пользовательский шрифт, так что у меня могут быть пользовательские значки на вкладке. Когда я использую свой шрифт, появляется значок, но он не использует цвет, указанный в css.

Появляется черный. Даже если я устанавливаю цвет непосредственно в отладчике, цвет не применяется.

Если я использую значок в представлении, это показывает, с правильной цветопередачей:

Я предполагаю, что есть некоторый тип маски применяются, но я не могу понять почему он делает его черным. Я, по крайней мере, подумал, что это будет тот же цвет, что и другие родные значки.

Обратите внимание, что если я изменил цвет всех значков (с помощью класса km-css css), мои пользовательские значки не изменяются.

Обратите также внимание: Когда я отладки, я вижу, что CSS говорит мне, что цвет должен быть оранжевым:

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> 

Answer 1

Кажется, что генератор шрифтов, который вы используете, стилирует :: перед псевдоэлементом, тогда как th элемент в знаках Kendo UI Mobile используется для теней. Вы должны стилизовать :: после псевдоэлемента, например:

[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; 
}