Custom checkbox Working in Chrome and Safari but not Firefox and IE
<p>I created a custom checkbox with basically an icon inside a checkbox. The icon is a font from flaticon so that I can easily change size and color. Unfortunately the checkbox is shown in Chrome and Safari but not in Firefox and IE. </p>

<p>Here is a sample of my code:</p>

<p><strong>CSS: Custom Checkbox</strong></p>

<pre><code>#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-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;
}

#checkicons label{
    max-width: 90px;
}
</code></pre>

<p><strong>Html: Checkbox</strong></p>

<pre><code>&lt;div id="checkicons"&gt;
  &lt;input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"&gt;&lt;/input&gt;&lt;br&gt;
  &lt;label for="housecare"&gt;House care&lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS: Flaticon</strong></p>

<pre><code>@font-face {
    ...url to fonts...
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  .flaticon-leisure4:after {
  content: "\e00f";
}
</code></pre>

<p>I did some tests on the code while trying to fix this issue. The behavior on Firefox and Safari is the same like I would delete the class in the html of the checkbox. </p>

<p>Here I do have two screenshots of the result. The first is working with chrome, the second is the not working version with firefox and IE which equals with the result if I would delete the code 'class="flaticon-leisure4"' from the html.</p>

<p><a href="http://i.stack.imgur.com/T6vHA.png" rel="nofollow">Result on Chrome, Safari</a> </p>

<p><a href="http://i.stack.imgur.com/9rXg2.png" rel="nofollow">Result on Firefox, IE</a></p>

<p>I would be happy If I can solve this problem or if you can give me alternative suggestions. </p>