Font Awesome over rides for radio buttons and checkbox's

the.css

/*  So first step is to hide your actual radio button because the browser won't let you hide the real thing  */
input[type="radio"], input[type="checkbox"] {
    display:none;
}
/*  Next specify a font size, 8px is comes out about the same size as a regular radio button  */
.radio-stack{
	font-size: 8px;
}

the.html

<label for="radioForAwesome">
    <input type="radio" ng-model="radioAwesome" name="radio_for_awesome" id="radioForAwesome" value="awesome">
    <span class="fa-stack radio-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x" ng-hide="radioAwesome === 'awesome"></i>
      <i class="fa fa-dot-circle-o fa-stack-2x" ng-show="radioAwesome === 'awesome'"></i>
    </span> Radio awesomeness
</label>
<label for="radioForNot">
    <input type="radio" ng-model="radioAwesome" name="radio_for_awesome" id="radioForNot" value="not">
    <span class="fa-stack radio-stack fa-lg">
      <i class="fa fa-circle-o fa-stack-2x" ng-hide="radioAwesome === 'not"></i>
      <i class="fa fa-dot-circle-o fa-stack-2x" ng-show="radioAwesome === 'not'"></i>
    </span> Radio not
</label>

<label for="checkboxForTruth">
    <input type="checkbox" ng-model="somethingTrue" name="something_true" id="checkboxForTruth" value="true">
    <span class="fa-stack radio-stack fa-lg">
      <i class="fa fa-square-o fa-stack-2x" ng-hide="somethingTrue"></i>
      <i class="fa fa-check-square-o fa-stack-2x" ng-show="somethingTrue"></i>
    </span> Checkbox for truth
</label>