After updating OceanWp, the checkbox’s tick doesn’t display
-
Hi!
I use Contact Form 7 for my forms on my web page. After updating OceanWp, the checkbox’s tick doesn’t display correctly.
I add the below code to the Customize > Custom CSS section and it continues to display strangediv.wpcf7 input[type="checkbox"] { -webkit-appearance: checkbox; }
there is a strange symbol behind the tick. I leave the page for you to see
Thank you!
The page I need help with: [log in to see the link]
-
I confirm the same issue after update to 1.7.3 and 1.5.19 on two sites using Elementor Pro form on one and WP form on the other.
Safari somewhat got the tick back after adding:
input[type=”checkbox”] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
}However, Chrome still shows a square in it and Mozilla has ‘fooc’…
Thanks, @momo-fr and @harrisdesigned – both hacks got it fixed!
I believe the main cause of this problem is that Font Awesome 5 uses font weights to differentiate between solid, regular and light while the check mark for the checkboxes (\f00c) is only available as solid (bold) in the free version. Regular and light cehckmarks are only available in Font Awesome 5 Pro. Since regular is the default and no font-weight is specified for the check marks, no icon will be shown.
https://fontawesome.com/icons/check?style=solid
Adding the below CSS code should fix the problem:
input[type=radio]:checked:before, input[type=checkbox]:checked:before { font-weight: bold; }
Now I see that @momo-fr already posted the same workaround. Any font-weight 600 or above will work in my experience.
The workaround of @harrisdesigned works because the normal (regular) font-weight check-circle (f058) icon is actually available in Font Awesome Free.
Thanks @momo-fr . I spent hour finding a solution and you solution worked like a charm.
Hi everyone,
I have tried each of the workarounds suggested by @momo-fr, @tomas-eklund, @michael-luther, and @harrisdesigned with only partial success.
The only solution that works for me at all is changing the
font-weight
to 600+, which fixes the issue on FireFox on desktop, but not Chrome when using incognito mode or either browser on mobile. Any ideas?Site info:
https://dannabarnett.com/ (contact form with checkboxes at bottom of homepage)
OceanWP 1.7.3
OceanExtra 1.5.19
Contact Form 7 5.1.16Sidenote: If @tomas-eklund is correct that the issue has to do with the Pro features of FontAwesome, perhaps this is why @apprimit does not see the issue on his end?
-
This reply was modified 2 years, 4 months ago by
phillbarnett.
-
This reply was modified 2 years, 4 months ago by
phillbarnett. Reason: Corrected which browsers seem to be exhibiting the problem
Anyone about the latest news here?
@newoceans can you share your site link so that I can check it? Are you using the FontAwesome Pro?
Hi @apprimit thnx for the reply mate!
Here’s the (development) site, it’s at the homepage in the e-mail subscription form:
– https://cicerofoundation.marcbijl.nlThis is how it looks at my end:
– https://snipboard.io/xY6lqu.jpgI managed to work around it, using this code:
/*https://wordpress.org/support/topic/after-updating-oceanwp-the-checkboxs-tick-doesnt-display/#post-12134277*/ input[type=checkbox]:checked:before { content: '✓' !important; }
Not sure how to check if I’m using Fontawesome Pro… I started this site by copying an existing site I made long time ago, and just had change some styling and css…
Where can I see if I’m using Fontawesome Pro?
@newoceans this issue has been fixed already. Follow the link to fix it – https://docs.oceanwp.org/article/637-icons-missing-after-font-awesome-5-upgrade
I checked your site and you are not using Fontawesome Pro.
Great @apprimit
Followed the steps and all is fine now! 😉
-
This reply was modified 2 years, 4 months ago by
- The topic ‘After updating OceanWp, the checkbox’s tick doesn’t display’ is closed to new replies.