title: How to Style CSS Checkboxes with Font Awesome
body: <p>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</p>
  
  <p><a href="http://jsfiddle.net/bBPY5/1/" rel="nofollow noreferrer">http://jsfiddle.net/bBPY5/1/</a></p>
  
  <p>It seems to be something a bit wrong with my CSS but I can't figure out what.</p>
  
  <pre><code>&lt;div id="sidebar-cards-archive"&gt;
  &lt;ul&gt;
      &lt;li class="cat-item cat-item-12"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="ofcards-rarity[]" value="12"&gt;Common (223)&lt;/label&gt;
      &lt;/li&gt;
      &lt;li class="cat-item cat-item-14"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="ofcards-rarity[]" value="14"&gt;Epic (40)&lt;/label&gt;
      &lt;/li&gt;
      &lt;li class="cat-item cat-item-11"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="ofcards-rarity[]" value="11"&gt;Free (83)&lt;/label&gt;
      &lt;/li&gt;
      &lt;li class="cat-item cat-item-15"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="ofcards-rarity[]" value="15"&gt;Legendary (36)&lt;/label&gt;
      &lt;/li&gt;
      &lt;li class="cat-item cat-item-13"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="ofcards-rarity[]" value="13"&gt;Rare (84)&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS </p>
  
  <pre><code> @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 */
  </code></pre>