Custom icon using a font icon

12 posts, 0 answers
  1. Aksh
    Aksh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2013 Link to this post

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

    Thanks
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Jan 2013 Link to this post

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

    Posted 04 Jan 2013 Link to this post

    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
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Jan 2013 Link to this post

    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!
  6. Chuck
    Chuck avatar
    35 posts
    Member since:
    Oct 2008

    Posted 13 Jun 2013 Link to this post

    Thanks for the great explanation and demo
  7. David Gerding
    David Gerding avatar
    44 posts
    Member since:
    Sep 2005

    Posted 12 Mar 2014 in reply to Kamen Bundev Link to this post

    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
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Mar 2014 Link to this post

    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!
     
  9. Mark
    Mark avatar
    5 posts
    Member since:
    Sep 2013

    Posted 06 Jul 2014 Link to this post

    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?
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Jul 2014 Link to this post

    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!
     
  11. Mark
    Mark avatar
    5 posts
    Member since:
    Sep 2013

    Posted 09 Jul 2014 Link to this post

    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
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Jul 2014 Link to this post

    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!
     
  13. Mark
    Mark avatar
    5 posts
    Member since:
    Sep 2013

    Posted 15 Jul 2014 Link to this post

    Thanks, thought I was going nuts.

    Mark
Back to Top
Kendo UI is VS 2017 Ready