Icone dei tag

[TheBestPessimist]

Tag a punto + colore del tag

Se stai usando tag in stile elenco puntato e

• vuoi avere lo stesso colore dell’icona del tag e del testo del tag
• vuoi mostrare il punto solo se non è impostata nessuna icona del tag

ecco come l’ho fatto per i tag books e science-fiction:

Risultato finale:

1. Configurazione del componente Tag icons (questo componente)

2. Configurazione di un componente secondario che deve essere mantenuto in sincronia con Tag Icons
   In questo componente stiamo facendo due cose:
   1. Nascondere il punto per tag specifici
   2. Colorare il testo del tag con lo stesso colore dell’icona

Affinché ciò funzioni, creiamo un nuovo componente del tema: Tag Icons extra.
Nella sezione Common/CSS:

1. Aggiungi il seguente mixin (necessario solo una volta):

@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

2. Per ogni tag che desideri modificare, incolla quanto segue e sostituisci REPLACEMETAG con il nome del tag e REPLACEMECOLOR con lo stesso colore dell’icona:

[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}