title: Bootstrap checkbox and radio input with font-awesome
body: <p>Can anyone give me a solution to this problem on IE8. I have this:
  HTML:</p>
  
  <pre><code> &lt;label&gt;
          &lt;input type="checkbox" checked /&gt;&lt;i class="icon-fixed-width icon-check"&gt;&lt;/i&gt; Three
      &lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>[type=checkbox] { display: none; }
  label { cursor: pointer; }
  [class*=icon-].icon-fixed-width { text-align: left; }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("[type=checkbox]").change(function () {
      $checkbox = $(this)
      $icon = $checkbox.siblings("[class*=icon-]")
  
      checked = $checkbox.is(":checked")
  
      $icon.toggleClass('icon-check', checked)
          .toggleClass('icon-check-empty', !checked)
  });
  </code></pre>
  
  <p>All work fine on modern browsers but on IE8 wont work.
  What is wrong here?
  <strong><a href="http://jsfiddle.net/rulernature/7kDJm/34/" rel="nofollow">Fiddle:</a></strong></p>
  
  <p>ty.</p>