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

[Ahmed26]

我只希望显示子类别的图标颜色。
主类别不应有图标颜色。
我不希望它看起来是双色的。

我该如何做到这一点？

[image]

[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);
}

[Ahmed26]

感谢您详细的解释

[Ahmed26]

@Bryce_Huhtala 桌面版可用

移动版不可用

我应该为移动版输入什么代码？

[bryce (Bryce Huhtala)]

嗯，这很奇怪。当我在电脑上使用移动视图时，它显示相同的 CSS 规则，所以我不知道为什么它会显示不同。我唯一能想到的是确保新代码位于 Common.scss 部分，以便两者都使用它。

[Ahmed26]

都是我的错

它运行正常，没有问题

[bryce (Bryce Huhtala)]

没关系，很高兴它能正常工作！