如何更改复选框小部件的图标？

.custom-checkbox input[type="checkbox"] {
  display: none; /* 隐藏原始的复选框 */
}

.custom-checkbox label {
  position: relative;
  padding-left: 25px; /* 设置图标的左边距 */
  cursor: pointer;
}

.custom-checkbox label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px; /* 设置图标的宽度 */
  height: 18px; /* 设置图标的高度 */
  border: 1px solid #ccc; /* 设置图标的边框样式 */
  background-color: #fff; /* 设置图标的背景颜色 */
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
  background-color: #007bff; /* 设置选中状态下图标的背景颜色 */
}

.custom-checkbox label:after {
  content: "\2713"; /* 设置图标的Unicode字符编码 */
  position: absolute;
  left: 4px; /* 设置图标的位置 */
  top: 1px;
  font-size: 14px; /* 设置图标的大小 */
  color: #fff; /* 设置图标的颜色 */
  visibility: hidden; /* 默认隐藏图标 */
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
  visibility: visible; /* 选中状态下显示图标 */
}

<div class="custom-checkbox">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label>
</div>