Awesome Checkbox

I usually prefer to use the built in checkboxes and other elements, since I think fighting all the browsers out there can be a frustrating and dangerous thing. However, the designers I work with think differently.

So I needed to setup a way to make a variety of checkboxes work with Font Awesome icons. So without further ado, here is the code for that.

HTML

One of the things that threw¬†me off at first is I am so used to wrapping my checkboxes with <label>s. For this to work we need to make sure we put the label after the checkbox. Remember to add your for=”” to your label so that it is connected to your input.

SCSS

This is the SCSS I am using (mostly, some stuff has been removed for brevity). Basically we just hide the input and apply a :before element to the label. Notice that I am using a half pixel for the :checked state. I believe I needed to do this because the .fa class that comes from FontAwesome uses antialiasing. Regardless you will need to adjust this anyway to fit your theme.

Here is what our result looks like:

gq893891

That is it! Now we have a fancy checkbox that should be cross browser compatible back to IE8.