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

sprite.png

1 Answer 130 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 04 Apr 2018, 07:58 AM

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

Sort by
0
Ivan Danchev
Telerik team
answered on 06 Apr 2018, 07:10 AM
Hi Eric,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Eric
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or