Kendo UI Mobile custom font tabstrip color not applied

[Rick]

I've got a custom font so that I can have custom icons in the tabstrip. When I use my font, the icon shows up but it's not using the color specified in the css.

It shows up black. Even if I set the color directly in the debugger, no color is applied.
<See Black.png attachment>

If I use the icon in a view, it shows up with correct color:
<See Orange.png attachment>

I assume there is some type of mask being applied but I can't figure out why it's making it black. I figured at the very least, it would be the same color as the other native icons.

Note that if I change the color of all the icons (with the km-icon css class), my custom icons do not change.

Note also: When I debug, I see that css is telling me that the color should be orange:

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>

[Kamen Bundev]

Hello Rick,

I wasn't able to reproduce this issue. Can you send a sample page or jsBin where we can reproduce it and help you fix it?

Regards,
Kamen Bundev
Telerik

[Rick]

I've attached the custom font but here's the css that I'm using:

[class^="km-icon-"]:before, [class*=" km-icon-"]:before {
  font-family: "fishingfont";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
     color: orange;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  font-size: 22px;
}
.km-icon-trophies:before { content: '\65'; } /* 'e' */

I've attached the entire VS project but here is the html code:

<div id="tabstrip-home"
    data-role="view"
    data-title="Home">

    <div data-role="content" class="view-content">
        Here is the icon outside of the tabstrip:<br/><br/>
        <i class="km-icon-trophies"></i>Home
    </div>
</div>

...

<!--Footer-->
<div data-role="footer">
    <div data-role="tabstrip">
        <a href="#tabstrip-home" data-icon="icon-trophies">Home</a>
        <a href="#tabstrip-login" data-icon="contacts">Login</a>
        <a href="#tabstrip-location" data-icon="search">Location</a>
        <a href="#tabstrip-weather" data-icon="globe">Weather</a>
    </div>
</div>

[Kamen Bundev]

Hello Rick,

It seems the font's generated CSS is using the ::before pseudo-element, while in Kendo UI Mobile ::before is used for shadows. In order to get it working, you should use the ::after pseudo-element for you font, like this (I've added some modifications, like making the orange affect only the active state and fixed the line height):
[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;
}

Regards,
Kamen Bundev
Telerik