Simple CSS Checkboxes with Font Awesome

index.html

<h1>Custom Checkboxes</h1>
<div>
  <input id="box1" type="checkbox" />
  <label for="box1">Checkbox 1</label>
  <input id="box2" type="checkbox" />
  <label for="box2">Checkbox 2</label>
  <input id="box3" type="checkbox" />
  <label for="box3">Checkbox 3</label>
</div>

Simple-CSS-Checkboxes-with-Font-Awesome.markdown

Simple CSS Checkboxes with Font Awesome

Custom CSS checkboxes using the Font Awesome icon font

Forked from James Barnett's Pen Simple CSS Checkboxes with Font Awesome.

A Pen by Captain Anonymous on CodePen.

License.

style.css

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

/*** basic styles ***/

body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { 
  width: 175px; 
  margin-left: 20px;
}

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f204"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f205"; color:green } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 10px; } /* allow space for check mark */