How to Style CSS Checkboxes with Font Awesome

Question

I am trying to style my checkboxes with Font Awesome, the checkboxes are auto generated from a plugin I\"m using with wordpress I have a mockup of what everything looks like

Answer 1

No JavaScript but small html manipulation like adding label with "for" attribute. so that when ever click on label checkbox click will trigger.

    .form input[type="checkbox"]{
  display:none;  
}
.form input[type="checkbox"] + label.fa {
    color: #88E2E2;
    font-size: 25px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.form input[type="checkbox"]:checked +label.fa{
    background: #fff;
}
.form input[type="checkbox"] + label.fa:before {
     display:inline-block;
     content: "\f096";
     cursor:pointer;
}

.form input[type="checkbox"]:checked +label.fa:before{
    content:"\f046";
    position: relative;
    left: 2px;
}