Stopping click propagation with custom checkboxes

I'm using custom styled checkboxes where I've replaced the default checkbox with font-awesome icons: link to image

The problem is that when I double click any of the items, although the checkboxes function, the clicks also get interpreted as if I'm highlighting text: link to image

Anyone know how I can get the same click behavior as a standard checkbox control where the clicks don't propagate down to the text?

Here's the code I'm using for the checkboxes:

CSS:

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
} 
input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 10px;
    font-size: 1.2em;
    width: 1.4em;
    content: "\f096";
}
input[type=checkbox]:checked + label:before {
    content: "\f046";
}

HTML:

  <div>
    <input type="checkbox" id="a">
    <label for="a">foo</label>
  </div>
  <div>
    <input type="checkbox" id="b">
    <label for="b">bar</label>
  </div>
  <div>
    <input type="checkbox" id="c">
    <label for="c">blah</label>
  </div>