Custom Icons

22 posts, 0 answers
  1. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 27 Mar 2012 Link to this post

    Hello,
    how to add custom icons for the tabstrip that work with the gradients?

    i tried the recommended solution but the gradients aren't working. the default icons got svg masks but i guess they're is / has to be a way to add custom icons.
    thanks in advance
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 28 Mar 2012 Link to this post

    Hi Florian,

    This is the recommended solution for setting a background image. However for the icons in Kendo UI Mobile we use a mask image. Something like this:
    -webkit-mask-box-image: url('image.png');
    You can use sprites, though you can only lay them out on one or multiple evenly sized rows or columns. If you want to use them, you will also need to adjust the background-size CSS property accordingly. Note that only the image alpha channel matters for the mask.

    Regards,
    Kamen Bundev
    the Telerik team
    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. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 28 Mar 2012 Link to this post

    Thanks Kamen, works great!
    I used 64x64 icons with color #424243 (default icon color). is this colorcode mandatory or does every single color icon work?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Mar 2012 Link to this post

    Hello Florian,

    The color is not important, only the transparency levels.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 29 Mar 2012 Link to this post

    what size would you recommend? the default icons are 64x64 but even on desktop browsers they barely exceed 40x40. 
    or just stick to the apple and android UI guidelines?
    http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html 
    http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html 
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Mar 2012 Link to this post

    Hi Florian,

    I would recommend to make the icons 64x64 or even bigger if you target retina displays and set the icon background-size CSS property, so that they resize accordingly on each device. This way you don't have to worry about resolutions. If you refer to the default Kendo UI icons - we are using relative units (em and rem) for most dimensions and on desktop we make them smaller by lowering the font-size, so the icon size will look smaller than on a real mobile device.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 05 May 2012 Link to this post

    Where and how does -webkit-mask-box-image: url('image.png'); get applied?

    Like this?

    <style>
    .km-custom {
      -webkit-mask-box-image
    : url("image.png");
    }
    </style>

    <div data-role="tabstrip">
     
    <a href="#index" data-icon="custom">Home</a>
    </div>

    Anker
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 May 2012 Link to this post

    Hello Anker,

    Yes, exactly.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 07 May 2012 Link to this post

    I finally got it to work.

    To create an icon mask, follow the instructions on this page: http://greenerpastures.dk/blog/iphone-udvikling/how-to-make-tab-bar-icons

    To get it to show up on your tab bar correctly do what I have done in the attached files.

    Phew/Anker
  11. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2012 Link to this post

    Is it possible to use icon fonts ?
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Aug 2012 Link to this post

    Hello Florian,

    Well, you can remove the background and the mask and use a pseudo-element (::before or ::after) with content set to the character you want.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Chris
    Chris avatar
    1 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    I am unable to insert custom icons with the following:

    <style>
    .km-custom {
      -webkit-mask-box-image: url("foo.png");
    }
    </style>

       <div data-role="tabstrip">
           <a href="#pm_mbb" data-icon="custom">PM MBB</a>
    </div>

    Ca someone please assit me as I am not too sure what to do.
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Feb 2013 Link to this post

    Hello Chris,

    According to the documentation, you need to also add this rule:
    .km-root .km-pane .km-view .km-question {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: currentcolor;
    }


    and specify the icon color:
    .km-question {
        -webkit-mask-box-image: url("foo.png");
        background-color: red;
    }


    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. tariq
    tariq avatar
    1 posts
    Member since:
    Jun 2011

    Posted 20 Feb 2013 Link to this post

    I am not able to show custom icon in my app .. here is the below code
    <style>
            .km-root .km-pane .km-view .km-question {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: green;
    }
                .km-chart {
        -webkit-mask-box-image: url("chart.png");
        background-color: red;
    }
                
                
                
            </style>

    I put this code in index.html page
  16. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Feb 2013 Link to this post

    Hello Tariq,

    The class names does not match. Please try the following:
    .km-root .km-pane .km-view .km-chart {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: green;
    }
     
    .km-chart {
        -webkit-mask-box-image: url("chart.png");
        background-color: red;
    }

    For more information please check the icons help topic.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 15 Jun 2013 Link to this post

    Hi, 

    My app does show the custom icon correctly on Android 4.1, but the custom icon is NOT shown on 4.2.
    Please help. 

    The code snippet is as follow:
    HTML: 
    <div data-role="tabstrip">
                        <a href="#eventsview" data-icon="featured">Events</a>
                        <a id="messageViewLink" href="#messagesview" data-icon="chat">Chats</a>
                        <a href="#contactlistview" data-icon="contacts">Contacts</a>
    </div>

    CSS:
    @font-face {
        font-family: "Hats";
        src: url("../fonts/-hats.woff") format("woff"),
             url("../fonts/-hats.ttf") format("truetype");
    }
    .km-chat:after,
    .km-chat:before
    {
        font: 1em/1em "Hats";
        content: '\f0e6';
    }
  18. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Jun 2013 Link to this post

    Hi Ralph,

    We can't reproduce the issue with our fonts. Can you provide a sample page or a live URL where we can test this and help you fix it? You can open a support ticket if you prefer the privacy.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jun 2013 Link to this post

    Hi,

    I have submitted the ticket 705070.

    BTW, I have also setup a simplified project on Icenium Mist.
    The custom icon shows on the simulator, but when I build the APK and install it on my Galaxy Nexus, it is not shown.

    How can I share the project on Icenium?

    Thanks.
  20. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Jun 2013 Link to this post

    Hi Ralph,

    I replied to your ticket, but I'll copy the answer here, if someone else stumbles upon this Android 4.2 bug:

    This seems like a bug in Adnroid 4.2 - similar issue is reported in the Android bug tracker - that some Unicode ranges doesn't get rendered in Android 4.2 WebView, while they worked fine in 4.1. The issue can be easily reproduced without Kendo UI Mobile:
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                @font-face {
                    font-family: "Hats";
                    src: url("fonts/-hats.woff") format("woff"),
                         url("fonts/-hats.ttf") format("truetype");
                }
                
                div {
                    font: 5em/1em Hats;
                    color: red;
                }
            </style>
        </head>
        <body>
            <div>&#xf0e6;</div>
        </body>
    </html>

    The only workaround I can think of is that you should use the same Unicode range that we used for our font - starting from \E000.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  21. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 24 Jun 2013 Link to this post

    Hi,

    Still no luck to make it works on Android 4.2

    I have attached my updated font files and CSS file in the support ticket.
    I changed both the encoding of the icon and the css file to /e800
    The icon is displayed correctly on iPhone emulator.

    Thanks for your help!
  22. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Jun 2013 Link to this post

    Hello Ralph,

    I responded to your ticket, but I will post the answer here for completeness:

    I pinned the bug down to this - the first character in a @font-face font in an Android 4.2 WebView seems to be always invisible. As a workaround add a dummy character before it, and it will render. I filed an Android bug report, which you may find here if you want to follow the case.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  23. Ralph
    Ralph avatar
    33 posts
    Member since:
    Oct 2012

    Posted 26 Jun 2013 Link to this post

    Hi Kamen,

    It works! Thanks!

    Thanks!
Back to Top
Kendo UI is VS 2017 Ready