How to Style CSS Checkboxes with Font Awesome

Question

I am trying to style my checkboxes with Font Awesome, the checkboxes are auto generated from a plugin I\"m using with wordpress I have a mockup of what everything looks like

Answer 1

Ok, that CSS you have won't work because its wrong.

Why? Because when you say "input + label", you should have an HTML markup like the one below:

Legendary (36) //You will be querying this label css with input + label

See, is placed immediately after . You can confirm this HERE

Now in your case, your was a child of you , looking like this:

            Legendary (36)

To query that, you could have done something like this:

label>input[type=checkbox] {

}
label>input[type=checkbox]:checked {

}

And since you wanted to put something beetwen them, you add this to your css:

label>input[type=checkbox]:before {

}
label>input[type=checkbox]:checked:before {

}

I've adjusted it for you. It's not the easiest/cutest way to implement it, but at least works with your current HTML.

Here's the FIDDLE