Custom tabstrip icon from font

6 posts, 1 answers
  1. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 06 Mar 2013 Link to this post

    Hi - I've been following your excellent guide for using a custom icon (http://docs.kendoui.com/getting-started/mobile/icons) but haven't been able to get this to work.  I've downloaded a font from Fontello as suggested and have added the following style rules:

    @@font-face {
        font-family: "fontello";
        src: url(@Url.Content("~/Content/font.ttf") format("truetype"),
             url(@Url.Content("~/Content/font.woff") format("woff");
    }
     
    .km-androidicon:after
    .km-androidicon:before {
        content: '\26';
    }
     
    .km-appstoreicon:after
    .km-appstoreicon:before {
        content: '\41';
    }
    I have the following markup which should be displaying the custom icons:

    <div data-role="layout" data-id="mobile-tabstrip">
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#tabstrip-iOS" data-icon="androidicon">iOS</a>
                <a href="#tabstrip-Android" data-icon="appstoreicon">Android</a>
            </div>
        </div>
    </div>
    When I try to view my page, I see the tabstrip but not the custom icons, just two square buttons.  Any suggestions as to what I'm missing would be appreciated.

    Thanks!
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Mar 2013 Link to this post

    Hi Christopher,

    I don't see in your code if you set the font to the icons. Basically you will need the following rule:
    .km-androidicon:after,
    .km-androidicon:before,
    .km-appstoreicon:after,
    .km-appstoreicon:before
    {
         font: 1em/1em "MyCustomFont";
    }

    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!
  3. Kendo UI is VS 2017 Ready
  4. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 07 Mar 2013 Link to this post

    Kamen - Thanks for your response!  You are correct, I was missing that rule so I added it in.  Unfortunately, I'm still seeing the boxes and not my custom icons.  I'm going to work on putting together a small project to demonstrate/reproduce this problem and will post it here as I think that will be more effective.

    Thanks!
  5. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 07 Mar 2013 Link to this post

    Hi Kamen - as I mentioned in my previous post, attached is a zip file that contains a simple VS2012 project which demonstrates my problem.

    Thanks!
  6. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Mar 2013 Link to this post

    Hi Christopher,

    You're missing two commas on the two rules where you're setting the icon character content. Add them and it will work.

    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!
  7. Christopher
    Christopher avatar
    4 posts
    Member since:
    Dec 2010

    Posted 08 Mar 2013 Link to this post

    Thanks Kamen, I appreciate the extra set of eyes and your assistance!!  You were correct, adding the two missing commas solved the problem.
Back to Top
Kendo UI is VS 2017 Ready