Styling form checkboxes with font awesome, <input> inside of <label> - css

Question

After following this question and getting the idea of styling which is shown below, I tried to replace the default checkboxes and style them.
Currently, the problem is that the checkboxes don't tick and I don't understand why.
Link to JsFiddle:
Fiddle Link Here
HTML
<div class="col-md-6 checkboxes">
<label for="id_tags_0"><input type="checkbox" name="tags" value="4" id="id_tags_0">
Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
Tag 2</label>
</div>
CSS
.checkboxes label {
/*display: inline-block;*/
cursor: pointer;
position: relative;
}
/*Hide default checkbox*/
.checkboxes input[type=checkbox] { display: none; }
/*Show an empty box before the our label by default*/
.checkboxes label:before {
content: "";
display: inline-block;
margin-right: 10px;
position: absolute;
left: 0;
top: 3px;
background-color: #fff;
border: 2px solid #d0d0d0;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s;
font-family: "FontAwesome";
color: #fff;
text-align: center;
}
/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}

Answer 1

You are trying to use parent selector, which is not possible through css.
Instead you can try this.
add a span after the checkbox and style it.
.checkboxes label {
/*display: inline-block;*/
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 20px;
margin-bottom: 0;
line-height: 24px;
font-size: 16px;
}
/*Hide default checkbox*/
.checkboxes input[type=checkbox] { display: none; }
/*Show an empty box before the our label by default*/
.checkboxes label span:before {
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin-right: 10px;
position: absolute;
left: 0;
top: 3px;
background-color: #fff;
border: 2px solid #d0d0d0;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s;
font-family: "FontAwesome";
font-size: 12px;
color: #fff;
text-align: center;
line-height: 15px;
}
/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked + span:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
content: "\f00c";
background-color: #66676b;
border: 2px solid #66676b;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>
<div class="col-md-6 checkboxes">
<label for="id_tags_0">
<input type="checkbox" name="tags" value="4" id="id_tags_0">
<span></span>
Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
<span></span>
Tag 2</label>
<label for="id_tags_2"><input type="checkbox" name="tags" value="2" id="id_tags_2">
<span></span>
Tag 3</label>
<label for="id_tags_3"><input type="checkbox" name="tags" value="3" id="id_tags_3">
<span></span>
Tag 4</label>
<label for="id_tags_4"><input type="checkbox" name="tags" value="5" id="id_tags_4">
<span></span>
Tag 5</label>
</div>