html - 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 in JSFiddle

http://jsfiddle.net/bBPY5/1/

It seems to be something a bit wrong with my CSS but I can't figure out what.

<div id="sidebar-cards-archive">
<ul>
    <li class="cat-item cat-item-12">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
    </li>
    <li class="cat-item cat-item-14">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
    </li>
    <li class="cat-item cat-item-11">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
    </li>
    <li class="cat-item cat-item-15">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
    </li>
    <li class="cat-item cat-item-13">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
    </li>
</ul>
</div>

Here is the CSS

 @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 #sidebar-cards-archive ul li {
     list-style: none;
 }
 /*** custom checkboxes ***/
 input[type=checkbox] {
     display:none;
 }
 /* to hide the checkbox itself */
 input[type=checkbox] + label:before {
     font-family: FontAwesome;
     display: inline-block;
 }
 input[type=checkbox] + label:before {
     content:"f096";
 }
 /* unchecked icon */
 input[type=checkbox] + label:before {
     letter-spacing: 10px;
 }
 /* space between checkbox and label */
 input[type=checkbox]:checked + label:before {
     content:"f046";
 }
 /* checked icon */
 input[type=checkbox]:checked + label:before {
     letter-spacing: 5px;
 }
 /* allow space for check mark */

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:

<input type="checkbox" name="ofcards-rarity[]" value="15">
<label>Legendary (36)</label> //You will be querying this label css with input + label

See, <label> is placed immediately after <input>. You can confirm this HERE

Now in your case, your <input> was a child of you <label>, looking like this:

<label>
            <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
</label>

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