Font Awesome Checkbox/Radiobox

by Bianca Kuehweidner

HTML

<script src="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.cs"></script>
<h1>Custom Checkboxes</h1>
<div class=".container">
  <div>
    <input id="box1" type="checkbox" class="with-font" />
    <label for="box1">Checkbox 1</label>
  </div>
  <div>
    <input id="box2" type="checkbox" class="with-font"/>
    <label for="box2">Checkbox 2</label>
  <div>
  <div>
    <input id="box3" type="checkbox" class="with-font" />
    <label for="box3">Checkbox 3</label>
  </div>
</div>
    
<h1>Custom Radio Buttons</h1>
<div class=".container">
  <div>
    <input id="question1" name="question" type="radio" class="with-font" value="sel" />
    <label for="question1">Radio 1</label>
  </div>
  <div>
    <input id="question2" name="question"type="radio" class="with-font" value="sel"/>
    <label for="question2">Radio 2</label>
  <div>
  <div>
    <input id="question3" name="question" type="radio" class="with-font" value="sel"/>
    <label for="question3">Radio 3</label>
  </div>
</div>

CSS

/*** basic styles ***/

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

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
    
input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f1db";
    letter-spacing: 10px;
    font-size: 1.0em;
    color: #535353;
    width: 1.2em;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f00c";
    font-size: 1.0em;
    color: darkgreen;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046";        
    color: darkgreen;
}
input[type=radio].with-font:focus ~ label:before,
input[type=checkbox].with-font:focus ~ label:before,
input[type=radio].with-font:focus ~ label,
input[type=checkbox].with-font:focus ~ label {                
    color: green;
}