Last Updated: September 09, 2019

Custom Checkbox with Font Awesome (Sass, Rails)

Cleaned up the code from CSS-Tricks and combined with icons from Font Awesome.

Sass code:

label.checkbox {width:100%; cursor:pointer; overflow: hidden;
 input[type=checkbox] {float:left; position:relative; margin-left:-9999px;} 
 i:before {width:25px; content: "\f096"; }
 input[type=checkbox]:checked + i:before {content: "\f046";}
}

Rails 3 view:

<fieldset>
 <%= form.label :newsletter, :class => 'checkbox' do %>
 <%= form.check_box :newsletter %>
 <i class="icon-"></i> Join up!
 <% end %>
</fieldset>