Custom input checkbox and radio style using fontawesome

fa-checkbox-radio.css

.input-fa-list {
    padding-top: 7px;
}
.input-fa-radio, .input-fa-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
}
.input-fa-radio:last-child, .input-fa-checkbox:last-child {
    margin-left: 0;
}
.input-fa-radio input[type=radio], .input-fa-checkbox input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 100%;
    cursor: pointer;
}
.input-fa-radio label:before, .input-fa-checkbox label:before {
    font-family: FontAwesome;
    display: inline-block;
    font-size: 120%;
    letter-spacing: 3px;
}

.input-fa-radio label:before {
  content: "\f10c";
}

.input-fa-checkbox label:before {
  content: "\f096";
}

.input-fa-radio input[type=radio]:checked+ label:before {
    content: "\f058";
}

.input-fa-checkbox input[type=checkbox]:checked+ label:before {
    content: "\f046";
    letter-spacing: 0px;
}

/**
 * Sample html 
 *    <div class="input-fa-list">
 *        <div class="input-fa-radio">
 *          <input type="radio" name="radioInput">
 *          <label>Label</label>
 *        </div>
 *    </div>
 */