Question

在我开发的页面中，我创建自定义复选框，包括字体和一些进一步的CSS。实际上它在Chrome和Safari上运行正常，但遗憾的是Firefox和IE根本没有显示复选框。首先我认为：之后或：之前可能是问题，但最后我无法解决它。我创建了一个例子。这个例子适用于Chrome（它没有显示Chrome中的字体 - 在它显示的真实版本中），Safari实际上显示的是字体。但真正的问题是， IE和Firefox根本没有显示（如果有或没有字体，则独立）。

https://jsfiddle.net/chejxapq/1/

#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>

Firefox和IE上没有显示包含图标的复选框，而是Safari和Chrome

0 个答案: