WP8& custom icons

13 posts, 0 answers
  1. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 05 Apr 2013 Link to this post

    Porting my web fonts over for WP8.

    I've specified my custom font like this.

    .km-root .km-pane .km-view .km-mail2 {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: currentcolor;
    }
     
    .km-mail2 {
        -webkit-mask-box-image: url("mail.png");
        background-color: red;
    }

    And, I've attached the file I'm using. It works in Android/iOS (if I substitute this for the web font. But, in WP8 it looks liike a solid white square. Any ideas?
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Apr 2013 Link to this post

    Hello Kenneth,

    I'm not sure I understand - you talk about web fonts but you've posted CSS for setting WebKit masks. If the font is your problem - web fonts are not supported in PhoneGap for WP8 (an omission on the Microsoft side - they are also not supported in HTML5 apps) - this was the reason we fall back to simple images for icons in WP8 appMode in the internal builds. If your question is why the masks don't work - the reason is that they are a WebKit only feature and not supported in IE10 - just use normal PNG images for icons. If you use a newer internal build, you can add your icon in the after pseudo-element that we use for our icons:
    .km-on-wp.km-app .km-mail2:after
    {
        background: url("mail.png");
    }


    Note that this pseudo element has set background-size: auto 100% and will resize your icon to 100% vertically - we do this in order to use horizontally distributed sprites for the icons.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 08 Apr 2013 Link to this post

    Still doesn't work. Guessing it's a problem with the format of the PNG file. Are there any special requirements?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Apr 2013 Link to this post

    Hi Kenneth,

    No special requirements - it is just a background image. It would be easier if you post a sample page or a live URL where I can check out what happens. I can convert this forum thread to a support ticket if you don't want to share these on the forum. Let me know if you want me to do that.

    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. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 09 Apr 2013 Link to this post

    Sample project that demonstrates the issue. 
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Apr 2013 Link to this post

    Hi Kenneth,

    You've left a space between .km-on-wp and .km-app, where there shouldn't be one. This however is not the only issue - in my example I didn't specify the content for the after element, and it should have one in order to be visible. I updated the CSS and in the next internal build it would be easier to set a background image for the icon. I've also updated your points. Currently you can override the background-image like this:
    .km-on-wp.km-app .km-test:after,
    .km-on-wp.km-app .km-tabstrip .km-state-active .km-test:after
    {
        content: "\a0";
        background-image: url("test.png");
    }


    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!
  8. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 10 Apr 2013 Link to this post

    Worked like a charm. Thanks.
  9. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 11 Apr 2013 Link to this post

    One last question. When I use this for buttons in WP8, when I tap the button and the button highlights the icon is not correct. Assuming I need a reverse-icon but not sure how to specify that in my stylesheet. Can you explain?

  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Apr 2013 Link to this post

    Hello Kenneth,

    The override I sent you was just for the TabStrip icons active state. However, if you're running the last internal build I mentioned, you can simplify it like this:
    .km-wp.km-on-wp.km-app .km-test:after
    {
        background-image: url("test.png");
    }


    And it should fix both the TabStrip and the Button active states.

    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!
  11. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 15 Apr 2013 Link to this post

    Does not work. 

    Just to be sure - I installed the latest internal build (.415) again, and used your CSS:

    .km-wp.km-on-wp.km-app .km-test:after
    {
        background-image: url("test.png");
    }

    When I did this it didn't use the correct icon at all.

    I then reverted it back to the original CSS

    .km-on-wp.km-app .km-test:after,
    .km-on-wp.km-app .km-tabstrip .km-state-active .km-test:after
    {
        content: "\a0";
        background-image: url("test.png");
    }

    and it worked as expected (with the button active state still not working). Double checked everything. Seems like I did it exactly as you suggested, but did not work.

    Any other thoughts?
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 16 Apr 2013 Link to this post

    Hi Kenneth,

    Just tested it here and it works okay with .415 and the CSS I last sent you. I've added the CSS rule to the end of your main.css (it should be added somewhere after the kendo.mobile.all.min.css link, but doesn't really matter where 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!
  13. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 17 Apr 2013 Link to this post

    I discovered that when I removed the CSS meant for platforms other than WP8 it works in WP8.

    .km-test:before, .km-test:after {
        font: 1em/1em "awesome";
        content: '\2713';
    }

    This is probably an ignorant question, but I'm not sure how to express the above and still make it work with the WP8 css. Can you advise?
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 18 Apr 2013 Link to this post

    Hi Kenneth,

    This is strange - the specificity of this rule is rather low and shouldn't be affecting the WP8 icon. I've tried adding it here and the icon was still working with it. This means that the real problem is probably somewhere else.

    Maybe not the best solution but if you can't find it, you can use platform specific classes to avoid the issue, like this:
    .km-ios .km-test:before,
    .km-ios .km-test:after,
    .km-android .km-test:before,
    .km-android .km-test:after
    {
        font: 1em/1em "awesome";
        content: '\2713';
    }


    However you'll need to add this for every custom icon you have.

    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!
Back to Top
Kendo UI is VS 2017 Ready