复选框的FontAwesome

我正在尝试将FontAwesome用于复选框-因此在未选中状态下，它将显示“垃圾箱”图标，在选中状态下，它将显示相同的图标，但颜色为红色。

我添加了font-awesome.min.css和字体。

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;
}

我在结果中确实看到了垃圾桶图标，但是它是不可单击的，当我单击它时，它不会变成红色。

我该怎么做？