我如何让分类图标颜色变成单一颜色？

[bryce (Bryce Huhtala)]

我不确定是否有为此设置的选项，但我可以向您展示我将如何尝试使用 CSS 进行更改：

1. 右键单击图标并选择“检查”。
   

   

2. 这将打开浏览器开发者工具。（注意：我这里使用的是 Chrome，但大多数浏览器都可以做到！）有很多内容需要查看，但我们将重点关注两个主要部分——“元素”，它以嵌套层次结构显示页面的各个部分，以及“样式”，它显示哪些 CSS 正在影响选定的元素。
   

   

3. 使用右键单击 → 检查通常能让我们非常接近我们想要编辑的元素，但很多时候你需要稍微挖掘一下。在这种情况下，它选择了一个 <span> 元素，但看起来负责图标的元素就在其中：一个 ::before 元素。
   

   

4. 查找正确元素的方法之一是观察页面，同时将鼠标悬停在元素面板中列出的项目上。当我将鼠标悬停在 ::before 上时，只有图标被高亮显示：
   

5. 在“样式”面板中，我们可以看到有一个声明将背景设置为红色，但它被另一个将背景设置为双色背景的规则覆盖了。（注意：您可以随意编辑“样式”面板中的任何 CSS 以进行实验。任何更改都是临时的，刷新页面后将恢复。您还可以打开或关闭单个声明以查看其效果。）
   

   

6. 我们可以通过从顶部规则复制选择器部分和从底部规则复制原始背景声明来创建一个新规则来再次覆盖它。
   

   

7. 这个新规则将放在您的自定义/主题 CSS 中，如果一切正常工作，图标应该是代表子类别的纯色！

.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}