ionicons 用图标替换复选框和单选按钮

Question

我在一个项目上使用 Ionicons，并用这些 icons.The 替换了单选框和复选框的标准图像，我遇到的问题是实际默认项目在渲染时通过 Ionicons 显示。

我有以下 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;
}

但是尽管 checkboxes/radio 按钮行为正常，但我可以在 ionicon 下方看到标准项目。是图标背景透明的缘故吗？

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

Answer 1

我已经创建了自定义 checkbox，您也可以使用相同的概念创建 radio button。现在我已经创建了正常（颜色变化）复选框，但您可以根据自己的要求对其进行自定义。请按照下面提到的link:

URL: https://jsfiddle.net/qq92vbcm/

ionicons 用图标替换复选框和单选按钮

ionicons replace checkbox and radion buttons with icons

html

css

checkbox

ionicons