Skip to content

Instantly share code, notes, and snippets.

@suzck
Last active August 29, 2015 14:15
Show Gist options
  • Save suzck/5f17cbdbaf5c7ca0f12b to your computer and use it in GitHub Desktop.
Save suzck/5f17cbdbaf5c7ca0f12b to your computer and use it in GitHub Desktop.
Font awesome and angular js custom radio inputs
/* 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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment