SOURCE

<form>
  <input type="radio" name="test" id="a">
  <i class="icon"></i>
  <label for="a">点我选男</label>
  <input type="radio" name="test" id="b">
 <i class="icon"></i>
  <label for="b">点我选女</label>
</form>

input,label {
   cursor: pointer;
}

input[type=radio] {
  opacity: 0;
}

input+.icon {
  display: inline;
  background: url('http://www.easyicon.net/api/resizeApi.php?id=1185688&size=24') ;
  position: absolute;
  background-size: 20px 20px;
  margin:-2px 0 0 -25px;
  width: 20px;
  height: 20px;
}

label {
  padding-left: 5px
}

input:checked+.icon {
   background: url('http://www.easyicon.net/api/resizeApi.php?id=1185685&size=24') ;
   background-size: 20px 20px;
}