Custom icon using a font icon

[Aksh]

How do I create a custom icon to be used on a button using a font icon?

Thanks

[Kamen Bundev]

Hello,

Currently you have two options - use a font generator service like Fontello to simplify the task, or prepare the icon, SVG and fonts manually.

Using Fontello is pretty straightforward - you pick the icons, choose the Unicode characters for them, type a font name and click Download. You'll get a zip file with the needed for mobile TTF and WOFF font formats (you won't need EOT as it targets only IE6-8, while the SVG font you can edit manually and convert again), which can be directly used for icons.

If you go the manual way, check these articles about how you can create a SVG font using Inkscape and then convert the font to TTF/WOFF, using Online Font Converter or other similar service. Of course you will need the skills to create your desired icon with a vector editing software, like Inkscape or Adobe Illustrator (though if you go AI, you will have to export the icon to Inkscape as AI can't create SVG fonts).

After you have the two fonts (TTF/WOFF), you can load the font with this CSS:
@font-face {
    font-family: "MyCustomFont";
    src: url("images/MyCustomFont.woff") format("woff"),
         url("images/MyCustomFont.ttf") format("truetype");
}

Then you should override the Kendo UI font for the icons (all icons in this case, but you can alternatively override them one by one):
.km-icon:after,
.km-icon:before
{
    font: 1em/1em "MyCustomFont";
}

And last but not least, you will need a CSS rule for every icon you have:
.km-mycustomicon:after,
.km-mycustomicon:before
{
    content: "\E03a";
}

Where mycustomicon is the icon name you've set in data-icon and \E03a is the Unicode character code for your icon (or you can use alphabet letters if you remap them instead).

I'll make sure all this information is added to our documentation.  The whole task is rather tedious, but the gain is that font icons look better on any types of screens, including retina ones.

Kind regards,
Kamen Bundev
the Telerik team

[Aksh]

Thanks but still having trouble.

Downloaded FontAwesome and added this to my css file:

@font-face {
    font-family: 'FontAwesome';
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype');
}
.km-icon:after,
.km-icon:before
{
    font: 1em/1em "FontAwesome";
}

.km-mycustomicon:after,
.km-mycustomicon:before
{
    content: "\f080";
}

Added this in my markup.
<div data-role="footer">
<div id="tabstrip" data-role="tabstrip">
<a href="#tabstrip-quote" data-icon="quote" >Quote</a>
<a href="chart.html" data-icon="mycustomicon">Chart</a>
</div>
</div>

Am not seeing the icon for the bar char that I have mapped to. Am just getting a blank square.

Thanks
Akshay

[Kamen Bundev]

Hello,

Looks like you're missing the src: property in your @font-face definition. Check this jsBin for a working version (which uses CDNJS to serve Font Awesome).

Regards,
Kamen Bundev
the Telerik team

[Chuck]

Thanks for the great explanation and demo

[David Gerding]

Hi,
I'm wondering is there a way to add icons for use with the tab strip without overriding the icons that are already provided by Kendo?  What if I want to just add one custom icon, for example, and keep the rest?

Thanks,
Dave

[Kamen Bundev]

Hello David,

I think this excellent blog post about using Font Icons in Kendo UI Mobile may help.

Regards,
Kamen Bundev
Telerik

 

 

[Mark]

All the discussions of font icons seem to center around mobile applications.  Is there any reason, other than that fact that they are monochrome, that I wouldn't want to use font icons for desktop targets?

[Kamen Bundev]

Hello Mark,

IE7 is currently the only problem aside from the monochrome colors, that we are not adopting font icons on desktop. This is due to IE7 not supporting pseudo elements which we use for rendering font icons using only CSS classes. To do that in IE7 we need to inject a letter inside every icon element we have and this is a rather big change, thus we need to plan for it beforehand.

That said, if you don't need to support IE7, nothing stops you from using font icons in Kendo UI on desktop by using the spriteCssClass property that most of our widgets support.

Regards,
Kamen Bundev
Telerik

 

 

[Mark]

Hi Kamen,

Thanks for the info but I'm having trouble getting the font icons to show up.  I'm still not quite getting something.  Would you possibly be able to create a jsbin that shows a font icon being placed on a button in a desktop browser?  I tried the link above but it appears to no longer be present.  I would be forever grateful.

Mark

[Kamen Bundev]

Hello Mark,

Seems I spoke too soon - .k-sprite overrides the font-size to 0 in order to work around a bug in IE7. Check out this jsBin how to fix this issue.

On a side note, there's a 3rd party project to replace all Kendo UI original icons with Font Awesome icons, you may want to check it out too.

Regards,
Kamen Bundev
Telerik

 

 

[Mark]

Thanks, thought I was going nuts.

Mark