CSS: Custom Checkbox doesn't work

I changed my checkboxes with the help of css, it work in Chrome, but not in i.e and edge. So, I found this reference: ref

This is my code:

         .checkbox-style {
            display: none;
        }

        .checkbox-style + label {
            position: relative;
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #C0C5C9;
            content: "";
            background: #FFF;
            align-items: center;
        }

        .checkbox-style[type="checkbox"]:checked + label:before {
            font-family: 'FontAwesome' !important;
            content: "\f00c";
            border: none;
            color: #015CDA;
            font-size: 12px;
            -webkit-text-stroke: medium #FFF;
            margin-left: -11px;
        }

And this is the html:

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

The checkbox is appear like I wanted but the :before of the label is not creating when I click on the checkbox. So, my checkboxes are not checkable. Why?