Font Awesome Radio Buttons and Checkboxes

font-awesome-form-elements.css

/*Custom Radio Buttons and Checkboxes using Font Awesome*/

input[type=radio],
input[type='checkbox'] {
  display: none;
}
input[type=radio] + label {
  display: block;
}
input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 8px;
  width: 23px;
}
input[type=radio] + label:before {
  content: "\f10c"; /* Radio Unchecked */
}
input[type=radio]:checked + label:before {
  content: "\f05d"; /* Radio Checked */
}
input[type="checkbox"] + label:before {
  content: "\f096"; /* Checkbox Unchecked */
}
input[type="checkbox"]:checked + label:before {
  content: "\f046"; /* 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>

*/

Seems like you should wrap those input fields with the label element or the click event won't go through... Right?

OK so I will reply to my own ignorant comment: The element must have the for="someID" attribute and THAT connects it to the actual input element which you've hidden. So the opposite of the usual best practice, but completely reasonable.