Icônes de balises

[TheBestPessimist]

Balises en puces + couleur de balise

Si vous utilisez des balises de style puce et que

• vous souhaitez avoir la même icône de balise et les mêmes couleurs de texte de balise
• vous souhaitez afficher la puce uniquement s’il n’y a pas d’icône de balise définie

voici comment je l’ai fait pour les balises books et science-fiction :

Résultat final :

1. Configuration du composant Tag icons (ce composant)

2. Configuration d’un composant secondaire qui doit rester synchronisé avec Tag Icons
   Dans ce composant, nous faisons deux choses :
   1. Masquer la puce pour certaines balises
   2. Colorer le texte de la balise avec la même couleur que l’icône

Pour que cela fonctionne, nous créons un nouveau composant de thème : Tag Icons extra.
Dans la section Common/CSS :

1. Ajoutez le mixin suivant (nécessaire une seule fois) :

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

2. Pour chaque balise que vous souhaitez modifier, collez ce qui suit et remplacez REPLACEMETAG par le nom de la balise et REPLACEMECOLOR par la même couleur que l’icône :

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