Styling form checkboxes with font awesome, inside of

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>