Checkbox tick displays as dots in Edge browser

I have a checkbox styled like so:

input[type="checkbox"] {
  position:relative;
  top:0.5em;
  -webkit-appearance: none;
  height: 1.25em;
  width: 1.25em;
  margin-right: 5px;
  vertical-align: top;
}

input {
  margin:0 0 0.2em 0;
  border-radius:0.1em;
  border:1px solid #d2d2d2;
  padding:0.8em;
  box-sizing:border-box;
  font-size:16px;
  color:black;
}

input[type="checkbox"]:checked::before{
  content: "\f00c";
  font-family:"FontAwesome";
  position: absolute;
  font-size: 1em;
  left: 0.15em;
  top:0.3em;
  text-align: center;
  width: 1.25em;
  color: #678b4f;
}

Jsfiddle here.

It appears nicely in most browsers and until now, it seems to at least fall back to something useable in more awkward browsers that ignore -webkit-appearance.

However, in Edge, the checked version of the checkbox appears as a very small dot (rather than font awesome tick) that is barely visible. If I remove -webkit-appearance, that displays something useable but that then breaks it in the webkit browsers.

Anyone know how I can fix/get around this?