Custom tabstrip icon from font

[Christopher]

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!

[Kamen Bundev]

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

[Christopher]

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!

[Christopher]

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!

[Kamen Bundev]

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

[Christopher]

Thanks Kamen, I appreciate the extra set of eyes and your assistance!!  You were correct, adding the two missing commas solved the problem.