Non sono sicuro che ci sia un’impostazione per questo, ma posso mostrarti come proverei a cambiarla usando CSS:
-
Fai clic con il pulsante destro del mouse sull’icona e scegli “Ispeziona”.
-
Questo aprirà gli strumenti per sviluppatori del browser. (Nota: sto usando Chrome qui, ma la maggior parte dei browser può fare la stessa cosa!) C’è molto da guardare, ma ci concentreremo su due sezioni principali: Elementi, che mostra le parti della pagina in una gerarchia nidificata, e Stili, che mostra quale CSS sta influenzando l’elemento selezionato.
-
Usare il clic destro → Ispeziona di solito ci porta abbastanza vicino all’elemento che vogliamo modificare, ma spesso è necessario scavare un po’. In questo caso, ha selezionato un elemento
<span>, ma sembra che l’elemento responsabile dell’icona sia al suo interno: un elemento::before.
-
Uno dei modi per trovare l’elemento giusto è osservare la pagina mentre passi il mouse sugli elementi elencati nel pannello degli elementi. Quando ho passato il mouse sul
::before, solo l’icona è stata evidenziata:
-
Nel pannello Stili, possiamo vedere che c’è una dichiarazione che imposta lo sfondo su rosso, ma viene sovrascritta da una regola diversa che lo imposta su uno sfondo a 2 colori. (Nota: sentiti libero di modificare qualsiasi CSS nel pannello Stili per sperimentare. Qualsiasi modifica è temporanea e verrà annullata al refresh della pagina. Puoi anche attivare o disattivare singole dichiarazioni per vederne gli effetti)
-
Possiamo creare una nuova regola per sovrascriverla di nuovo copiando la parte del selettore dalla regola in alto e la dichiarazione di sfondo originale dalla regola in basso.
-
Questa nuova regola andrebbe nel tuo CSS personalizzato/tema e, se tutto funzionasse correttamente, le icone dovrebbero essere di colori solidi che rappresentano le sottocategorie!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}