custom checkbox
<div class="form-group checkw10">
<input type="checkbox" name="fancy-checkbox-primary-custom-icons" id="fancy-checkbox-primary-custom-icons" autocomplete="off" />
<div class="btn-group">
<label for="fancy-checkbox-primary-custom-icons" class="btn btn-primary">
<span class="glyphicon glyphicon-check"></span>
<span class="glyphicon glyphicon-unchecked"></span>
</label>
<label for="fancy-checkbox-primary-custom-icons" class="btn btn-default active">
principal
</label>
</div>
</div>
/* ============== CHECKBOX CUSTOM ============== */
.form-group.checkw10 input[type="checkbox"] {
display: none;
}
.form-group.checkw10 input[type="checkbox"] + .btn-group > label span {
width: 20px;
}
.form-group.checkw10 input[type="checkbox"] + .btn-group > label span:first-child {
display: none;
}
.form-group.checkw10 input[type="checkbox"] + .btn-group > label span:last-child {
display: inline-block;
}
.form-group.checkw10 input[type="checkbox"]:checked + .btn-group > label span:first-child {
display: inline-block;
}
.form-group.checkw10 input[type="checkbox"]:checked + .btn-group > label span:last-child {
display: none;
}