Hi @totalfly
Hope you are doing fine!
You can change the icon of the Date Field by applying custom CSS code to it. For instance, to add Font Awesome icons you can use the following code:
.forminator-ui #date-1 .forminator-icon-calendar:before{
font-family: "Font Awesome 5 Free"!important;
font-weight: 900!important;
content: "\f133"!important;
}
The code has to be added in Appearance > Customize > Additional CSS section. The unicode in the “content” property can be changed to any of the calendar icons. Please see the available icons here:
https://fontawesome.com/icons/calendar?s=solid&f=classic
If you don’t have Font Awesome included in your site, you can use the following plugin to add it:
https://ww.wp.xz.cn/plugins/font-awesome/
Hope this information is useful
Kind regards
Luis
Thread Starter
Advex
(@totalfly)
hi, this just partially works because in your css for the icons font-family is already defined here
.forminator-ui [class*=forminator-icon-]:before, .forminator-ui [class^=forminator-icon-]:before {
- font-family: forminator-icons-font!important;
and cannot be overwritten
so basically including your css both will work but the primary css have the priority..
Hi @totalfly
I hope you are doing well.
Not really, CSS will be overridden depending on how strong the Selectors are
https://specificity.keegan.st/
https://monosnap.com/file/EJK2U8SjvSPvM7CBaty1bjxwp5lSrS
But in case the selector is not working well on your end, please add the following one:
#forminator-module-630.forminator-ui #date-1 .forminator-icon-calendar:before{
font-family: "Font Awesome 5 Free"!important;
font-weight: 900!important;
content: "\f133"!important;
}
Just replace the -630 with your Form ID and use it in WordPress > Appearance > Customise > Additional CSS:
https://monosnap.com/file/Mp8Y7UZy8tHODx2giUfcdpfytlv6X8
Best Regards
Patrick Freitas
Hello @totalfly ,
We haven’t heard from you for a week now, so it looks like you don’t have more questions for us.
Feel free to re-open this ticket if needed.
Kind regards
Kasia
