Hi
I see this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<style>
.mySearchIconx {
background-image: url("http://kendo.cdn.telerik.com/2017.1.223/styles/Bootstrap/sprite.png");
background-position: -32px -240px;
}
</style>
</head>
<body>
<button id="button" type="button">Search</button>
<script>
$("#button").kendoButton({
spriteCssClass: "mySearchIconx"
});
</script>
</body>
</html>
2 Questions
1) How does it know why to show the Search icon? Sprite.png contains a lot of icons? What to change if i want anither icon?
2) My project has a folder structure with "Content\Bootstrap\ in which folder the sprite.png is, i don't want to use
background-image: url("http://kendo.cdn.telerik.com/2017.1.223/styles/Bootstrap/sprite.png");
but use my own file on disk. I tried a lot of combinations like:
background-image: url("~\Content\Kendo\Bootstrap\sprite.png");
But i don't get it working
Any help is appreciated
Eric
1 Answer, 1 is accepted
1. The search icon is displayed because its background-position is specified:
background-position: -32px -240px;If you want to show a different icon from the sprite.png image, you can do so by setting the respective background-position value, for example:
background-position: -160px -240px;2. If you want to load the sprite.png file locally give the following path a try:
background-image: url("./Content/sprite.png");Regards,
Ivan Danchev
Progress Telerik