Custom checkbox don't work on Firefox

I custom my checkbox with FontAwesome but it's work only on Chrome...

I put this on my page:

<link rel="stylesheet" href="http://ift.tt/1TL8X9P" />

<input type="checkbox" id="checkbox_cd" class="custom-checkbox" />

Here my css:

/*
input.custom-checkbox {
    visibility: hidden;
}
*/
input.custom-checkbox:checked::after, input.custom-checkbox::after {
    visibility: visible;
    font-family: FontAwesome;
    font-size: 60px;
    background-color: transparent;
    display: inline-block;
}

input.custom-checkbox:checked::after {
  content: '\f058';
  color: #16A085;
}

input.custom-checkbox::after {
  content: '\f057';
  color: #C0392B;
  position: relative;
  bottom: 5px;
}

jsfiddle

Thanks,