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

Using Glyphicons

1 Answer 268 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 08 Oct 2012, 12:20 PM
Hi,

I have recently purchased the glyphicons PRO icon set (http://glyphicons.com/) 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 (http://docs.kendoui.com/getting-started/mobile/tabstrip) 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?

Thanks,
Thomas

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 10 Oct 2012, 11:38 AM
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.

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!
Tags
TabStrip (Mobile)
Asked by
Thomas
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or