How to make a shortcode checkbox required when styled using Dashicons

I am using Contact Form 7 and am styling the checkbox. The plugin uses a short code for its checkboxes like this, where the asterisk makes the checkbox required:

[checkbox* checkbox-958 "Check this box."]

It works just fine, but I don’t like the look of the box. I found a tutorial to replace the box with a font icon. The only problem is that it won’t work with the short code. I have to replace the short code with this:

<input type="checkbox" />

By removing the short code, I also remove the required element and the accompanying warning text. I’d prefer to depend on the plugin for this, but I have tried every adjustment I can think of and nothing works. Here’s what I’m using on the plugin’s form:

<p>Click the star before sending. <label class="styled-box">
<input type="checkbox" /><i class="dashicons dashicons-star-empty unchecked"></i>
<i class="dashicons dashicons-star-filled checked"></i> </label></p>

Do you have any suggestions on how to make clicking the font icon mandatory? Thank you.

https://www.ads-software.com/plugins/contact-form-7/