Checkbox including icon is not showing on Firefox and IE but Safari and Chrome

within a page that I develop, I create custom checkboxes including a font and some further css. Actually it is working properly on Chrome and Safari but unfortunately Firefox and IE is not showing the checkboxes at all. First I thought that :after or :before might be the issue, but finally I could not solve it. I created an example. This example is working on Chrome (it is not showing the font in Chrome - in the real version it is showing it), Safari is actually showing the font. But the real problem is, that IE and Firefox is not showing it at all (independent if with or without font).

http://ift.tt/1SMkfLQ

#checkicons input[type=checkbox]{
  visibility: hidden;
  height: 80px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
  visibility: visible;
  font-family: Flaticon;
  font-size:50px;
  margin-left: 36px;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after{
  color: white;
  border: solid black;
  background-color: #1e6e11;
  border-width: 1px;
}

#checkicons input[type=checkbox]:after{
  color: #1e6e11;
  border: solid #1e6e11;
  background-color: white;
  border-width: 1px;
}


@font-face {
    font-family: "Flaticon";
    src: url("fonts/flaticon.eot");
    src: url("fonts/flaticon.eot#iefix") format("embedded-opentype"),
    url("fonts/flaticon.woff") format("woff"),
    url("fonts/flaticon.ttf") format("truetype"),
    url("fonts/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;

    }.flaticon-oven:after {
        content: "\e000";
    }
}


<div id="checkicons">
    <input type="checkbox" class="flaticon-oven" id="oven" name="oven" onchange="toggleDiv(this)"></input><br>
</div>