html - How to Style CSS Checkboxes with Font Awesome -

I'm trying to style my checkbox with the font strange style, checkboxes are auto generated from a plugin I " I'm using it with WordPress. I have a motive for what I see in JSfield

It seems that there is something wrong with my CSS but I do not know

  
 
 
  
  Input Type =" Checkbox "name =" OffCard -Rarity [] "value =" 14 "& gt; Epic (40) & Lt; / label & gt; & lt; li class = "cat-item cat-item-11"> Labels & gt; & lt; input type = "checkbox" name = " OffCard-Rarity [] "Value =" 11 "& gt; Free (83) & lt; / label & gt; & Lt; / Li & gt; & Lt; Li class = "cat-item cat-item-15" & gt; & Gt; Label & gt; & Lt; Input type = "checkbox" name = "offcard-rarity []" value = "15" & gt; Mythical (36) & lt; / Lab L & gt; & Lt; / Li & gt; & Lt; Li class = "cat-item cat-item-13" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" name = "offcard-rarity []" value = "13" & gt; Rare (84) & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   
 Here's the CSS  
  @import url (// netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome Css); # Sidebar-card-collections ul li {List-style: none; } / *** Custom checkbox *** / Input [type = checkbox] {display: none; } / * Hide the checkbox * / input [type = checkbox] + label: first {font-family: FontAwesome; Display: Inline-block; } Input [type = checkbox] + label: {content: before "\ f096"; } / * Uncheck icon * / input [type = checkbox] + label: {letter-spacing: 10px; } / * Place between the checkbox and label * / input [type = checkbox]: check + label: {content: before "\ f046"; } / * Check icon * / input [type = checkbox]: check + label: {letter-spacing: 5px; } / * Allow location for check mark * /    
 
 
 OK, this CSS you won is not working because its wrong  
 Why? Because when you say "Input + label", you should have an HTML markup similar to the one below:  
  & lt; Input type = "checkbox" name = "offcard-rarity []" value = "15" & gt; & Lt; Label & gt; Mythical (36) & lt; / Labels & gt; // You will query this label CSS with input + label   
  & lt; Label & gt;  to  & lt; Input & gt; . You can confirm this  
 Now in your case, your  & lt; Input & gt;  You had a child  , looks like this:  
  & lt; Label & gt; & Lt; Input type = "checkbox" name = "offcard-rarity []" value = "15" & gt; Mythical (36) & lt; / Label & gt;   
 To ask, you can do something like this:  
  label & gt; Input [type = checkbox] {} label & gt; Input [type = checkbox]: Check {}   
 And since you wanted to do some bitwen, you add it to your CSS:  
  Label> gt; Input [type = checkbox]: {} Labels & gt; Before the input [type = checkbox]: Checked: {}   
 I have adjusted it for you. It is not the easiest / most sweet way to implement it, But at least works with your current HTML.  
 here