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; font-family: FontAwesome; display: inline-block; content: "f096"; margin-right: 8px; }
input[type=checkbox]:checked ~ label:before { content: "f046"; }