change date pciker icon

[Wit]

Hi ,

I would like to change icon I have tried :

.k-i-calendar {
    background-image: url('../images/svg/calendar_icon.svg') !important;
    height: 16px !important;
    width: 16px !important;
    background-size: 16px 16px;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

but it has no effect. CSS Inspector shows that my svg file is in use but old icon is displayed. 

[Dimo]

Hello Wit,

The provided CSS styles should work. You even don't need all of them, and some of the !important clauses can be removed if you use an additional :hover selector:

http://dojo.telerik.com/USEXE

Regards,
Dimo
Telerik

 

 

[Vishakha]

I am using font awesome and looking forward to include the calendar icon from it using CSS only how to do that? I am using the below code but not working for me

.k-i-calendar,
        .k-i-calendar:hover {
            font-family: "Font Awesome" !important;
            content: "\f073" !important;
            color: #354053 !important;
        }

  

[Georgi Denchev]

Hi, Vishakha,

I have modified the dojo from above, you can examine the code here:

https://dojo.telerik.com/@gdenchev/AmirEXEd 

The icon will change when you hover over the datePicker.

If you wish to use the fontawesome icon at all times, not just when you're hovering, you can remove the :hover attribute from the style.

Dojo:

https://dojo.telerik.com/@gdenchev/OXUbOTig 

[Wit]

That looks great, but have you tried it with svg instead of png?

[Dimo]

Hello Wit,

SVG backgrounds work as well, I tested with latest Chrome, Firefox and IE11:

http://dojo.telerik.com/USEXE/2

The problem on your side may be caused by the browser version or browser settings.

Regards,
Dimo
Telerik

 

 

[Wit]

Hi Dimo,

I am using the latest version of browsers. What kind of browser setting do you have in mind?  I am using svg icons in a different part of my application and they work just fine.

Thank you

[Dimo]

Hello Wit,

I did not have any specific setting in mind, this was "food for thought". For example, Internet Explorer has various security settings, which can prevent certain features from working. Chrome and Firefox have loads of internal settings, which are accessible by advanced users, etc.

Does my demo with the SVG background image work on your side? If yes, then you have no problems with SVG images, but with CSS styles. I am pretty sure that you have already double checked that the image exists at the expected location and the URL is correct, so the only thing, which comes to mind is CSS specificity.

Try removing some stylesheets (leave the Kendo UI ones + the SVG-related CSS rules) and see what happens.

If your research does not isolate the cause of the problem, then send me a runnable example for inspection.

Regards,
Dimo
Telerik

 

 

[Ludovic]

Hi Dimo,

I tried your code example, it work very well on PC with Chrome, but it doesn't work on an Ipad with Chrome too.

On Ipad, on DateTimePicker load, it display the up arrow that is on the top left on your file sprite.png. So the .k-i-calendar class is not considered. Then after a mouse over (finger over on Ipad !) the class .k-i-calendar:hover is well considered and the good icone is displayed. Strange, not ?

You can try it with an Ipad and your example: http://dojo.telerik.com/USEXE

Do you have a solution ?

Regards,

Ludovic

 

[Dimo]

Hi Ludovic,

Kendo UI icons use a different sprite image for retina displays. This can be easily tracked down if you inspect the datepicker's icon in emulated device mode in Google Chrome (see the screenshot).

In this particular case, the correct icon on iPads is not displayed because of the !important clause that you are using for the background position.

You have two options:

1. Enforce your non-retina icon on retina displays by using higher specificity, which overrides the retina styles.

.k-widget .k-icon.k-i-calendar,
.k-widget .k-icon.k-i-calendar:hover {
    background-image: url('http://events.iupui.edu/_assets/images/icons/date.png');
    background-size: 16px 16px;
    background-position: center;
}

or

2. Use a separate CSS rule with a media query (similar to ours) with a different icon for retina displays.


Regards,
Dimo
Telerik

[Ludovic]

Thanks Dimo,

I tried your first solution and it works !