评论页面独有的自定义图标

[Don]

你好，

我也写了一个 CSS 解决方案。

它将隐藏默认的勾选图标，并在 ::before 伪元素中添加自定义图标。

1. 创建一个新的主题组件。

2. 将图标上传到上传部分，并添加 SCSS 变量名：review-approved-icon
   

   

3. 点击 编辑 CSS/HTML 按钮，并将以下代码粘贴到 Common / CSS 部分。

如果您想使用 var(--success) 为自定义图标添加颜色，请使用此项

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
      @media (prefers-color-scheme: dark) {
        // var(--success) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

如果您的图标已有想要的颜色，请使用此项

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

如果您想在浅色和深色主题方案中使用不同的图标，请使用此项

如果您选择此项，则需要上传两个具有不同颜色的图标。

SCSS 变量名：review-approved-icon-light 和 review-approved-icon-dark

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon-light);
      @media (prefers-color-scheme: dark) {
        content: url($review-approved-icon-dark);
      }
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---