How do I style radio buttons and checkboxes using FontAwesome?

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";
}