Custom Checkbox With Only Fontawesome 03.04.2018

Hi there friends, I've made a custom style checkbox only using with fontawesome, here the codes;

HTML:

<div class="custom-checkbox">
  <label for="custom-cb">
   <input type="checkbox" class="" id="custom-cb">
  </label>
</div>

SCSS:

.custom-checkbox{
label{
position: relative;
input {
visibility: hidden;
&:before, &:after{
visibility: visible;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #444;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: -3px;
left: 0;
}
&:before{
display: none;
}

&:after {
display: block;
content: "\f0c8";
}
}

input:checked{
&:before{
display: block;
content: "\f14a";
}

&:after{
display: none;
}
}
}
}