<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>
<!------ Include the above in your HEAD tag ---------->
<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>
<!-- A degradeable list of checkboxes -->
<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>
</li>
</ul>
<ul class="toggle">
<li>
<input type="radio" name="group2" id="t1" class="radio" />
<label for="t1">Toggle this</label>
</li>
<li>
<input type="radio" name="group2" id="t2" class="radio" />
<label for="t2">Or maybe this</label>
</li>
</ul>
</div>
</div>
/* Based on or inspired from the following (among others):
http://www.andwecode.com/custom-checkbox-radio-with-icon-fonts/
http://jsfiddle.net/8PYJg/
http://fortawesome.github.io/Font-Awesome/examples/
http://cssdeck.com/labs/custom-radiobutton-and-checkbox-with-fontawesome-full-style-solution
http://cssdeck.com/labs/css-checkbox-styles
http://astronautweb.co/snippet/font-awesome/
*/
ul { padding: 0!important;}
ul li {
list-style-type: none;
margin: 0;
padding: .5em;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
label {
position: relative;
padding-left: 40px;
font-size: 18px;
line-height: 32px;
cursor: pointer;
}
label:before, label:after {
/* You *have* imported Fontawesome in your html doc, right? */
font-family: FontAwesome;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
padding: 1px;
}
/*unchecked*/
.checkbox+label:before {
content: "\f096";
color: #333;
}
.checkbox+label:after {
content: "\f00c";
margin: -3px 0 0;
max-width: 0;
overflow: hidden;
opacity: 0.5;
/* CSS3 transitions for animated effect for browsers that support it */
transition: all 0.3s ease-in-out;
}
.radio+label:before {
content: "\f10c";
color: #333;
}
.radio+label:after {
content: "\f111";
margin: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
input[type="checkbox"]:checked + label:after {
max-width: 40px;
opacity: 1;
color: #0c0;
}
input[type="radio"]:checked + label:after {
max-width: 40px;
opacity: 1;
color: #000;
}
input[type="radio"]:checked + label:before {
opacity: 0;
}
.toggle .radio+label:before {
content: "\f204";
color: #333;
}
.toggle .radio+label:after {
content: "\f205";
rotate: ;
margin: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
