Replace default HTML checkboxes with Font Awesome icons

styled-checkboxes.css

input, input::before {
  margin: 0px !important;
  top: 0px;
}
label {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label input {
  cursor: pointer;
  font-size: 1em;
  height: 0px;
  margin: 0px;
  opacity: 0;
  width: 0px !important;
}
label span::before {
  color: black;
  content: '\f0c8';
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  font-size: 1.5em;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  margin-right: 10px;
  position: relative;
  visibility: visible;
  text-rendering: auto;
  top: 3px;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
  label:hover span::before {
    content: '\f14a';
    filter: alpha(opacity=50);
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    opacity: 0.5;
  }
}
label input:checked ~ span::before {
  content: '\f14a';
  filter: alpha(opacity=100);
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  opacity: 1;
}
@media (min-width: 768px) {
  label input:checked:hover ~ span::before {
    color: black;
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
}