This is a migrated thread and some comments may be shown as answers.

Custom icon using a font icon

11 Answers 845 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Aksh
Top achievements
Rank 1
Aksh asked on 03 Jan 2013, 10:29 PM
How do I create a custom icon to be used on a button using a font icon?

Thanks

11 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 04 Jan 2013, 09:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aksh
Top achievements
Rank 1
answered on 05 Jan 2013, 03:09 AM
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
0
Kamen Bundev
Telerik team
answered on 08 Jan 2013, 12:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chuck
Top achievements
Rank 1
answered on 13 Jun 2013, 02:55 PM
Thanks for the great explanation and demo
0
David Gerding
Top achievements
Rank 1
answered on 12 Mar 2014, 07:50 PM
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
0
Kamen Bundev
Telerik team
answered on 13 Mar 2014, 09:53 AM
Hello David,

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

Regards,
Kamen Bundev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 06 Jul 2014, 10:05 PM
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?
0
Kamen Bundev
Telerik team
answered on 09 Jul 2014, 07:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 10 Jul 2014, 04:19 AM
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
0
Kamen Bundev
Telerik team
answered on 14 Jul 2014, 08:13 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 15 Jul 2014, 04:50 PM
Thanks, thought I was going nuts.

Mark
Tags
General Discussions
Asked by
Aksh
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Aksh
Top achievements
Rank 1
Chuck
Top achievements
Rank 1
David Gerding
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or