As we all know, HTML and CSS give us nothing in the way of prettifying our checkbox and radio button inputs. Enter this handy CSS tip to create styled, purdy inputs:

Hide the actual checkbox, and then add your FontAwesome character to the ::before selector of the label immediately in front of the input, using the :checked selector of the input to detect on/off and changing the character accordingly.

input[type=checkbox] {
    display: none;
input[type=checkbox] ~ label::before {
    color: #33A9FF;
    content: "f096";
    display: inline-block;
    font-family: "FontAwesome";
    margin-right: 8px;
input[type=checkbox]:checked ~ label::before {
    content: "f046";