● CSSで チェックボックスをカスタマイズ（その1. labelタグで囲う方法）

<label class="my_checkbox">
    <input name="id[]" type="checkbox" value="1">
    <span>Checkbox 1</span>
</label>

.my_checkbox {
    cursor: pointer;
}
.my_checkbox input[type=checkbox] {
    display: none;
}
.my_checkbox input[type=checkbox]+span:before {
    font-family: FontAwesome;
    font-size: 24px;
    content: "\f096";
    display: inline-block;
    width: 26px;
    position: relative;
    top: 3px;
}
.my_checkbox input[type=checkbox]:checked+span:before {
    content: "\f046";
}

・デモ

https://pgmemo.tokyo/livedemo/customize_checkbox/customize_checkbox2.html

● CSSで チェックボックスをカスタマイズ（その2 label の id を使用する方法）

<div class="my_checkbox">
    <input id="box1" type="checkbox" />
     <label for="box1">Checkbox 1</label>
</div>

.my_checkbox input[type=checkbox] {
    display: none;
}
.my_checkbox input[type=checkbox]+label:before {
    font-family: FontAwesome;
    font-size: 24px;
    content: "\f096";
    display: inline-block;
    width: 26px;
	position: relative;
	top: 3px;
}
.my_checkbox input[type=checkbox]:checked+label:before {
    content: "\f046";
}

・デモ

https://pgmemo.tokyo/livedemo/customize_checkbox/customize_checkbox.html