Font awesome and angular js custom radio inputs

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"] {
    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="radioEnvelope">
    <!--  the ng-model value will be used to tell your 'ng-show' which input to watch, and you will also need to 
    set a value  -->
    <input type="radio" ng-model="shipment.type" name="type" id="radioEnvelope" value="envelope">
    <!--  Icon stack, Background icon first, then foreground, the stack code comes directly from font awesome, no special css  -->
    <span class="fa-stack radio-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i> <!-- Outer circle icon -->
      <!--  below we are using 'ng-show', the model and value we defined above on the input itself to
      check if the radio button is checked and toggle our inner circle's visibility  -->
      <i class="fa fa-circle fa-stack-1x" ng-show="shipment.type === 'envelope'"></i> <!-- toggling inner circle icon -->
    </span> Envelope <!-- the actual text on the radio button -->
</label>