Custom radio button ve checkbox yapımı

--Css content ile yapımı--
HTML KISMI
     <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <form>
        <input type="checkbox" name="" id="c1"><label for="c1">Chek 1</label><br>
        <input type="checkbox" name="" id="c2"><label for="c2">Chek 2</label>
    </form>


----------------------------------------
CSS KISMI
body{
    margin: 200px;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + label:before{
    font-family:'FontAwesome';
    content: "\f096";
    margin:5px;
    width: 15px;
    display: inline-block;
}
input[type="checkbox"]:checked + label:before{
    content: "\f14a";
    color: green;
    animation:sec 150ms ease-in;
}

@keyframes sec{
    0%{transform:scale(0)}
    90%{transform:scale(2)}
    100%{transform:scale(1)}
}

 --------------------------------------------------------------------------------------
CSS BACGROUND İMAGE İLE YAPIMI 
HTML KISMI 
<link rel="stylesheet" href="style.css">
<form>
        <input type="radio" name="r1" id="r1"><label for="r1">Radio 1</label><br>
        <input type="radio" name="r1" id="r2"><label for="r2">Radio 2</label>
    </form>
----------------------------------------
CSS KISMI

body{
    margin: 200px;

}
label{
    cursor: pointer;
}
input[type="radio"]{
  width   : 41px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}
input[type="radio"]+label{
    background: url("radio.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    line-height: 41px;
    margin-left: -23px;
    padding-left: 42px;
}
input[type="radio"]:checked+label{
    background-position: 0 -41px;
    display: inline-block;

}