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

change date pciker icon

8 Answers 248 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Wit
Top achievements
Rank 1
Wit asked on 21 Nov 2014, 02:13 PM
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. 

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Nov 2014, 08:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Vishakha
Top achievements
Rank 1
commented on 21 Sep 2021, 05:35 PM

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
Telerik team
commented on 23 Sep 2021, 08:30 AM

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 

0
Wit
Top achievements
Rank 1
answered on 26 Nov 2014, 12:00 PM
That looks great, but have you tried it with svg instead of png?
0
Accepted
Dimo
Telerik team
answered on 27 Nov 2014, 07:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Wit
Top achievements
Rank 1
answered on 27 Nov 2014, 09:09 AM
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
0
Dimo
Telerik team
answered on 28 Nov 2014, 01:59 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ludovic
Top achievements
Rank 1
answered on 01 Jun 2015, 09:31 PM

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

 

0
Dimo
Telerik team
answered on 03 Jun 2015, 03:06 PM
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-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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ludovic
Top achievements
Rank 1
answered on 03 Jun 2015, 06:23 PM

Thanks Dimo,

I tried your first solution and it works !

Tags
Date/Time Pickers
Asked by
Wit
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Wit
Top achievements
Rank 1
Ludovic
Top achievements
Rank 1
Share this question
or