After updating OceanWp, the checkbox’s tick doesn’t display

Resolved Nico
(@nicowp2019)

2 years, 6 months ago
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 strange
```
div.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]

Viewing 11 replies - 16 through 26 (of 26 total)

← 1 2

mgustavs
(@mgustavs)

2 years, 5 months ago

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!
Tomas Eklund
(@tomas-eklund)

2 years, 5 months ago
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;
}
```
Tomas Eklund
(@tomas-eklund)

2 years, 5 months ago

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.

https://fontawesome.com/icons/check-circle?style=regular

Badar
(@badarjamal)

2 years, 4 months ago

Thanks @momo-fr . I spent hour finding a solution and you solution worked like a charm.
phillbarnett
(@phillbarnett)

2 years, 4 months ago
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.16

Sidenote: 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
Marc Bijl
(@newoceans)

2 years, 3 months ago

Anyone about the latest news here?

Amit Singh
(@apprimit)

2 years, 3 months ago

@newoceans can you share your site link so that I can check it? Are you using the FontAwesome Pro?
Marc Bijl
(@newoceans)

2 years, 3 months ago
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.nl

This is how it looks at my end:
– https://snipboard.io/xY6lqu.jpg

I 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;
}
```
Marc Bijl
(@newoceans)

2 years, 3 months ago

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?

Amit Singh
(@apprimit)

2 years, 3 months ago

@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.

Marc Bijl
(@newoceans)

2 years, 3 months ago

Great @apprimit

Followed the steps and all is fine now! 😉