Simple Fontawesome checkbox

by Wendell Christian

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<label>
        <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> One
    </label>
    <label>
        <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Two
    </label>
    <label>
        <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Three
    </label>

CSS

[type=checkbox] { display: none; }
label { cursor: pointer; }
[class*=icon-].icon-fixed-width { text-align: left; }

JavaScript

$("[type=checkbox]").change(function () {
    $checkbox = $(this);
    $icon = $checkbox.siblings("[class*=icon-]");

    checked = $checkbox.is(":checked");

    $icon.toggleClass('icon-check', checked).toggleClass('icon-check-empty', !checked);
});