Bootstrap Radio Buttons

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
<h2>
button example
</h2>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="opts" value="male" id="option1" />Male</label>
  <label class="btn btn-default">
    <input type="radio" name="opts" value="female" id="option2" />Female</label>
  
</div>

<h1>
Re-styled with font awesome example
</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

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);
.active {
  background-color: #337ab7 !important;
  border-color: #2e6da4 !important;
  color: white !important;
}


/*** basic styles ***/

body {
  margin: 30px;
}

h1 {
  font-size: 1.5em;
}

label {
  font-size: 24px;
}

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: "\f096";
  letter-spacing: 10px;
  font-size: 1.2em;
  color: #535353;
  width: 1.4em;
}

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