Não tenho certeza se existe uma configuração para isso, mas posso mostrar como eu tentaria mudar usando CSS:
-
Clique com o botão direito no ícone e escolha ‘Inspecionar’.
-
Isso abrirá as ferramentas de desenvolvedor do navegador. (Observação: estou usando o Chrome aqui, mas a maioria dos navegadores pode fazer a mesma coisa!) Há muito o que olhar, mas focaremos em duas seções principais - Elementos, que mostra as partes da página em uma hierarquia aninhada, e Estilos, que mostra qual CSS está afetando o elemento selecionado.
-
Usar o clique com o botão direito → Inspecionar geralmente nos aproxima bastante do elemento que queremos editar, mas muitas vezes é preciso procurar um pouco. Neste caso, ele selecionou um elemento
<span>, mas parece que o elemento responsável pelo ícone está dentro dele: um elemento::before.
-
Uma das maneiras de encontrar o elemento certo é observar a página enquanto você passa o mouse sobre os itens listados no painel de elementos. Quando passei o mouse sobre o
::before, apenas o ícone foi destacado:
-
No painel Estilos, podemos ver que há uma declaração definindo o plano de fundo como vermelho, mas está sendo substituída por uma regra diferente que o define como um plano de fundo de 2 cores. (Observação: sinta-se à vontade para editar qualquer CSS no painel Estilos para experimentar. Quaisquer alterações são temporárias e serão revertidas quando a página for atualizada. Você também pode ativar ou desativar declarações individuais para ver seus efeitos)
-
Podemos criar uma nova regra para substituí-la novamente, copiando a parte do seletor da regra superior e a declaração original do plano de fundo da regra inferior.
-
Esta nova regra iria no seu CSS personalizado/tema e, se tudo funcionasse corretamente, os ícones seriam cores sólidas representando as subcategorias!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}