ionicons用图标取代复选框和单选按钮

Question

我在一个项目中使用Ionicons，并用这些图标替换了收音机和复选框的标准图像。我遇到的问题是，实际的默认项在呈现时通过Ionicon显示。

我有以下HTML：

<input type="checkbox"
       name="client{!!  $client->uuid !!}"
       class="checkbox-icon ion-android-checkbox-outline-blank" checked>

我还有以下CSS：

.checkbox-icon:before,
.radio-icon:before {
  visibility: visible;
  font-size: 20px;
}
.checkbox-icon.ion-android-checkbox-outline-blank:checked:before {
  content: "f374";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}
.radio-icon.ion-ios-circle-outline:checked:before {
  content: "f120";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}
input[type=checkbox].checkbox-icon.ion-android-checkbox-blank,
input[type=radio].radio-icon.ion-record {
  visibility: hidden;
}

但是，尽管复选框/单选按钮的行为正确，但我可以看到ionicon下面的标准项。这是因为图标的背景是透明的吗？

我尝试将不透明度更改为100%，但没有帮助。

Answer 1

我已经创建了自定义checkbox，通过使用相同的概念，您也可以创建radio button。目前，我已经创建了普通（颜色更改）复选框，但您可以根据自己的要求进行自定义。请点击以下链接：

网址：https://jsfiddle.net/qq92vbcm/