Skip to content

Instantly share code, notes, and snippets.

@pwFoo

pwFoo/form-input.css

Created December 5, 2016 18:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pwFoo/6d0e679e437c874fc27466048f763fd7 to your computer and use it in GitHub Desktop.
Save pwFoo/6d0e679e437c874fc27466048f763fd7 to your computer and use it in GitHub Desktop.
Download ZIP
input checkbox / radio font awesome support
Raw
form-input.css
/* 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);
}
Raw
form.html
<!-- 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