FontAwesome for checkbox

I am trying to use FontAwesome for checkbox - so in unchecked state - it will display Trash icon, and in checked state, it will display the same icon but in red color.

I added the font-awesome.min.css and the fonts.

HTML:

<div class="delete-checkbox">
   <input type="checkbox" id="checkbox-delete-6053923167078">
   <span></span>
</div>

CSS:

.delete-checkbox input[type="checkbox"] {
    display: none;
}

.delete-checkbox span:before {
    font-family: "FontAwesome";
    font-style: normal;
    width: 1em;
    height: 1em;
    content: '\f014';
    margin-right: .3em;
}

.delete-checkbox input[type="checkbox"]:checked ~ span:before {
    color: red;
}

I do see in the result the trash icon, however, it's not clickable and when I click on it, it doesn't turn red.

How can I do it?