Using Glyphicons

2 posts, 0 answers
  1. Thomas
    Thomas avatar
    4 posts
    Member since:
    Aug 2012

    Posted 08 Oct 2012 Link to this post


    I have recently purchased the glyphicons PRO icon set ( and I am now trying to add the icons to my KendoUI Mobile app. I've tried to add them using the instructions laid out in Creating Custom Icons doc ( with the png icons but the icons look stretched and appear in different sizes to each other.

    I've noticed that the default icons for KendoUI are in a png file with an svg mask file used to extract each icon from the file. Glyphicons comes with an svg file which contains all the icons. I was wandering how to extract the Glyphicon icons in the same way as KendoUI extracts the default icons.

    How are the default icons extracted and added to allow them to be referenced through the data-icon attribute? How can I extract the Glyphicon icons from the svg file and reference them through the data-icon attribute?


  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 10 Oct 2012 Link to this post

    Hello Thomas,

    The SVG icons in our stylesheets are only for Firefox support. The icons we use in WebKit browsers are in the PNG file and are only clip masks (the color is dependent on the background color and images which are clipped by the said mask). Your icons include shadows and colors in them and when clipped, may appear distorted (the shadow is also included in the clip region). If you want to use background images instead, you need to disable the masks with:
    html .km-icon
    -webkit-mask-box-image: none;
    -webkit-mask-image: none;

    and then use background-image and background-size to set yours.

    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!
Back to Top