TabStrip icons when using iOS 7

[John]

Hi, 

I've got the following code for my tabs trip, and the icons appear properly when loaded into Safari or Firefox, but when using an iOS 7 device they are not appearing correctly.  The attached screenshot shows how they appear on the iOS 7 device. 

The code for the tabs trip is embedded in a layout.  
Here's the gist showing the relevant code:
  https://gist.github.com/johncclayton/54ba76aa355d8ea74475

I'm using KendoUI mob version: 2013.2.923

Thanks!

[Kamen Bundev]

Hi John,

Can you send the icons and how you define them in your CSS? Thank you in advance.

Regards,
Kamen Bundev
Telerik

[John]

Well, that's the thing - I DONT define any icons that are used in the toolbar.

I have this in my own CSS file which is included after the kendo css:

@font-face {
    font-family: "FilewaveIcons";
    src: url("../fonts/extra-images.ttf") format("truetype"),
         url("../fonts/extra-images.woff") format("woff");
}

.km-icon-menu:after,
.km-icon-menu:before
{
    font-family: "FilewaveIcons";
    content: "\2630";
}


.km-icon-cancel-circled:after,
.km-icon-cancel-circled:before
{
    font-family: "FilewaveIcons";
    content: "\2716";
}


and to force the Tab Strip stuff to work, I need to add this:

.km-ios7 .km-state-active .km-globe::after {
    content:"\e0dc"
}


.km-ios7 .km-globe::after, .km-globe::before {
    content:"\e0dc"
}


.km-ios7 .km-state-active .km-bookmarks::after {
    content:"\e0cf"
}


.km-ios7 .km-bookmarks::after, .km-bookmarks::before {
    content:"\e0cf"
}


.km-ios7 .km-state-active .km-settings::after {
    content:"\e0da"
}


.km-ios7 .km-settings::after, .km-settings::before {
    content:"\e0da"
}

[Kamen Bundev]

Hi John,

You may have hit an issue that sneaked in our service pack - we changed the casing of the two icon fonts in Kendo UI Mobile, but due to a caching issue in our build system, both new and old fonts made it in the release archive. That would not be a problem by itself if all OS file systems were case-sensitive which they are not (except in Linux). So when you (or the installer) extract the files, the fonts overwrite each other and only 2 of them remain - one new and one old. Depending on in what browser are you testing, this may lead to missing icons. The fix is easy - download the latest internal build and extract the 2 fonts from the images folder in your images folder, overwriting the ones you have there (or delete them beforehand).

I'm attaching the 2 fonts here, just in case.

Let me know if this helps.

Regards,
Kamen Bundev
Telerik