<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>Bootstrap with Font awesome checkbox in pure css</h2>
</div>
<div class="row pt-50 pl-50">
<p>THIS WORKS DOWN TO IE9, but bootsnipps FontAwesome version seems a bit outdated. I've used 4.2.0. You have to try this in another environment.</p>
<p>What's cool about this? No extra html markup! Font awesome character values inserted with CSS "content". You can use your own svg's to make it more interesting.</p>
<ul class="checkboxes">
<li>
<input type="checkbox" name="1" id="c1" class="checkbox" />
<label for="c1">Do this</label>
</li>
<li>
<input type="checkbox" name="2" id="c2" class="checkbox" />
<label for="c2">Check that</label>
</li>
<li>
<input type="checkbox" name="3" id="c3" class="checkbox" />
<label for="c3">And this</label>
</li>
</ul>
<ul class="radiobuttons">
<li>
<input type="radio" name="group1" id="r1" class="radio" />
<label for="r1">Either this</label>
</li>
<li>
<input type="radio" name="group1" id="r2" class="radio" />
<label for="r2">Or this</label>