Cross-Browser Form Controls - Made with SASS and Font Awesome

font-awesome-form-controls.scss

// Demo: http://codepen.io/o0110o/pen/ZQWLKR?editors=110

// Comment out the following line if you already have Font Awesome installed
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

// Base Style
.icon {
    text-decoration: none;
    margin-left: 0.4rem;
    &:before {
        position: relative;
        left: -0.4rem;
        font-family: "FontAwesome";
    }
}

// Font-Awesome form controls for radios and checkboxes
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

input[type="checkbox"] + label {
    @extend .icon;
    &:before {
        content: "\f096";
    }
}

input[type="checkbox"]:checked + label {
    &:before {
        content: "\f046";
    }
}

input[type="radio"] + label {
    @extend .icon;
    &:before {
        content: "\f10c";
    }
}
input[type="radio"]:checked + label {
    &:before {
        content: "\f192";
    }
}

// EXAMPLE HTML
// <input id="my-input" name="my-input" type="radio" value="my-value">
// <label class="radio" for="my-input">
//    My Input
// </label>