Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
input checkbox / radio font awesome support
/* hide default checkbox if checked */
input[type='checkbox'].fa-replace:checked,
input[type='radio'].fa-replace:checked {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border:none;
border-radius: 0;
}
/* use font awesome icon in pseudo before element */
input[type='checkbox'].fa-replace:checked:before,
input[type='radio'].fa-replace:checked:before {
font-family: 'FontAwesome';
content: attr(data-fa-icon);
}
<!-- unicode list: http://fontawesome.io/cheatsheet/ -->
<input type="checkbox" name="checkbox-demo" id="checkbox-demo-1">
<label for="checkbox-demo-1" class="fa-replace" data-fa-icon="&#xf257;">Label</label>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.