Last Updated: September 09, 2019
·
2.65K
· adiwibisono

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>