DEMO
When using font-awesome you can set the size and color of the checkbox just by styling the parent container, you can select any two icons to be used in the 'checked' and 'unchecked' states.
Intallation
1. Download the code here.
2. Include the Javascript (awesome-checkbox.js) and the CSS (awesome-checkbox.css) in your HTML document (css in the header and the js before the closing body tag).
NOTE: It requires jQuery, so include it as well (if you haven't already)
Usage
1. Add the class 'awesome-checkbox' to the checkbox you want to style.
2. Also add the data-icon-checked attribute to the checkbox and set it to the class(es) you want to use.
3. Also add the data-icon-unchecked attribute to the checkbox and set it to the class(es) you want to use.
NOTE: You don't have to initialize awesome checkbox, however, if you get the HTML asynchronously (eg: with an ajax request) you need to initialize it manually by running the following js function:
initialize_awesome_checkbox()Example
Plan HTML
<input checked="checked" class="awesome-checkbox" data-icon-checked="fa fa-check-circle-o" data-icon-unchecked="fa fa-circle-o" id="checkbox-2" name="checkbox-2" type="checkbox" value="1">
Ruby on Rails
If you are using ruby on rails you can use a helper that will look like this:
check_box_tag "checkbox-2", 1, true, :class => 'awesome-checkbox', 'data-icon-checked' => 'fa fa-check-circle-o', 'data-icon-unchecked' => 'fa fa-circle-o'
Both will produce: