FontAwesome Checkboxes and Radio Buttons CSS

fa-checkbox-gravity-forms.css

/* CSS to use FontAwesome icons in place of normal checkboxes and radio buttons. 
Tested on WordPress, should work most places. */

/* hide the OS/browser checkboxes/radio buttons */
input[type=checkbox], input[type=radio] {
  visibility: hidden;
  margin: 0;
  width: 0!important;
}

input[type=checkbox] + label:hover, input[type=radio] + label:hover { 
  cursor: pointer; 
}

/* set FontAwesome and positioning */
input[type=checkbox] + label:before, input[type=radio] + label:before {
  font-family: "FontAwesome";
  font-size: 20px;
  position: relative;
  margin-right: 0.7em;
}

/* Gravity Forms tweaks - change for your forms plugin */
.gform_wrapper li.gf_list_inline ul.gfield_checkbox li,
.gform_wrapper li.gf_list_inline ul.gfield_radio li {
  display: -moz-inline;
  display: inline;
}

/* set checkbox icons and opacities for normal, hover, and checked */
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:hover:before { content: "\f046"; filter: alpha(opacity=30); opacity: 0.3; }
input[type=checkbox]:checked + label:before { content: "\f046"; }
input[type=checkbox]:checked + label:hover:before, input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }

/* set radio button icons and opacities for normal, hover, and checked */
input[type=radio] + label:before { content: "\f10c"; }
input[type=radio] + label:hover:before { content: "\f192"; filter: alpha(opacity=30); opacity: 0.3; }
input[type=radio]:checked + label:before { content: "\f192"; }
input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }