Page 1 of 1
Paradise Theme - Calendar Icon Change
Posted: 01 May 2020, 09:00
by koushik_m100
Hi,
We are developing an application using the Paradise theme (Paid Version). I have a requirement like changing the calendar component icon if it is only time selection field (HH:mm). I have gone through different materials on web and tried various solutions but nothing worked actually. Is there any way to achieve this without losing responsiveness.
Any equivalent component also we can give a try. Thanks in advance.
Re: Paradise Theme - Calendar Icon Change
Posted: 10 May 2020, 05:50
by koushik_m100
Any Update on this?
Re: Paradise Theme - Calendar Icon Change
Posted: 03 Jun 2020, 10:51
by mert.sincan
Hi,
Sorry for the delayed response! Which component are you using p:calendar or p:datepicker?
https://www.primefaces.org/showcase/ui/ ... ndar.xhtml
https://www.primefaces.org/showcase/ui/ ... cker.xhtml
Best Regards,
Re: Paradise Theme - Calendar Icon Change
Posted: 03 Jun 2020, 14:20
by koushik_m100
I am using p:calendar component
Re: Paradise Theme - Calendar Icon Change
Posted: 16 Jun 2020, 13:11
by mert.sincan
You need to override the following css class to change navigation icons;
Code: Select all
body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
font: normal normal normal 14px/1 FontAwesome; /* If you want to change icon library, please change this line */
}
body .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
content: "\f053"; /* FontAwesome icon code */
}
body .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
font: normal normal normal 14px/1 FontAwesome; /* If you want to change icon library, please change this line */
}
body .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
content: "\f054"; /* FontAwesome icon code */
}
If you want to change different icons in Calendar, please let me know which icon you want to change.
Best Regards,