<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h3>Checkboxes - Custom styled checkboxes using Font Awesome</h3>
<div class="row">
<div class="col-md-9 custom-fa">
<label for="name1">
<input id="name1" name="name1" type="checkbox">
<span>Checkbox label 1</span>
</label>
<label for="name2">
<input id="name2" name="name2" type="checkbox">
<span>Checkbox label 2</span>
</label>
</div>
</div>
</body>
</html>
.custom-fa input[type="checkbox"] {position:absolute;left:-999px;}
.custom-fa input[type="checkbox"]:focus + span{color:#46c0ef;}
.custom-fa label{cursor: pointer;}
.custom-fa label input[type="checkbox"] + span:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
font-weight: 400;
font-style: normal;
font-size: 1.4em;
text-align:center;
letter-spacing: 6px;
}
.custom-fa label input[type="checkbox"]:checked + span:before { content: "\f046";letter-spacing: 3px; } /* checked icon */
.custom-fa label input[type="checkbox"]:indeterminate + span:before{content: "\f147";letter-spacing: 6px;}