Font Awesome Radio Buttons and Checkboxes (LESS Version)

font-awesome-checkboxes-radios

//Custom Radio Buttons / Checkboxes
input[type=radio],
input[type='checkbox'] {
  display: none;
}
input[type=radio] + label {
  display: block;
}
input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
  .fa;
  font-size: 18px;
  padding-right: 8px;
  width: 23px;
}
input[type=radio] + label:before {
  content: @fa-var-circle-o; /* Radio Unchecked */
}
input[type=radio]:checked + label:before {
  content: @fa-var-dot-circle-o; /* Radio Checked */
}
input[type="checkbox"] + label:before {
  content: @fa-var-square-o; /* Checkbox Unchecked */
}
input[type="checkbox"]:checked + label:before {
  content: @fa-var-check-square; /* Checkbox Checked */
}
.radio label,
.checkbox label {
  padding-left: 0;
}


/*
HTML Markup should look like this:

<div class="checkbox">
  <input type="checkbox" id="myCheckbox" name="myCheckbox" value="myCheckbox">
  <label for="myCheckbox">Checkbox Label</label>
</div>

<div class="radio">
  <input type="radio" id="myRadio" name="myRadio" value="myRadioOption">
  <label for="myRadio">Label</label>
</div>

*/