Pure CSS3 filled-in Radio Buttons feat. FontAwesome

style.css

.circle-radio-boxes {
  margin-left: -10px;
  padding-top: 5px;
}
.circle-radio-boxes input[type=radio] {
  visibility: hidden;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
.circle-radio-boxes label {
  display: inline-block;
  font-family: FontAwesome;
  margin-left: 10px;
}
.circle-radio-boxes label:before {
  content: "\f111";
}
.circle-radio-boxes input[type=radio]:checked ~ label:before {
  content: "\f10c";
}

test.html

<div class="circle-radio-boxes">
  <label for="optionsRadios1"></label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"/>
  <label for="optionsRadios2"></label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="checked"/>
  <label for="optionsRadios3"></label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"/>
  <label for="optionsRadios4"></label>
    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4"/>
</div>

http://jsfiddle.net/r5vDY/