Simple Fontawesome checkbox

HTML

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

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)
});