How to use Font Awesome for checkboxes etc

Question

I'm using Font Awesome for icons in my website. I'm pretty new to HTML & CSS. I was trying to use this for checkboxes, and had hard time in figuring out how I could use it to enable / disable checkbox and get the approrpiate icon shown.

For Example; I'm using the below tags for checkbox:

<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>

I'm using the below jQuery to change the icon when the checkbox is enabled/disabled:

$(".icon-check-empty").click(function(){
    $('#prime').removeClass('icon-check-empty');
    $('#prime').addClass('icon-check');
});

I'm sure this would not be the way how it should be used. Can you please guide me what should be the way how it should be used.

For now; I want to use the check-boxes, and my goal is to check/uncheck the check-box, and show it's corresponding icon. When checked: icon-check ; unchecked: icon-check-empty

Please guide me !!

Answer 1

Here is my simple CSS-only method:

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

The basic idea is to select spans:before that is next to input you want. I made an example with checkboxes & radios. If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify.

As a side-note, you can style things however you like using this method, so change color, background, shadow-color, icons, etc.

You can get the character to add using the FontAwesome source.

selectivizr supports :before & :checked, so if you are supporting IE6-8, use that to support IE6+:

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script>
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript>
<![endif]-->