TabStrip icons when using iOS 7

4 posts, 0 answers
  1. John
    John avatar
    13 posts
    Member since:
    Feb 2013

    Posted 26 Sep 2013 Link to this post

    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!











  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Sep 2013 Link to this post

    Hi John,

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

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    13 posts
    Member since:
    Feb 2013

    Posted 26 Sep 2013 Link to this post

    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"
    }




  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready