Ícones de tags

[TheBestPessimist]

Tags em formato de lista + cor da tag

Se você está usando tags em formato de lista e:

• deseja ter as mesmas cores para o ícone da tag e o texto da tag
• deseja mostrar o marcador apenas se não houver ícone da tag definido

aqui está como fiz para as tags books e science-fiction:

Resultado final:

1. Configuração do componente Tag icons (este componente)

2. Configuração de um componente secundário que deve ser mantido sincronizado com Tag Icons
   Neste componente, estamos fazendo duas coisas:
   1. Ocultar o marcador para tags específicas
   2. Colorir o texto da tag com a mesma cor do ícone

Para que isso funcione, criamos um novo componente de tema: Tag Icons extra.
Na seção Common/CSS:

1. Adicione o seguinte mixin (necessário apenas uma vez):

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

2. Para cada tag que deseja editar, cole o seguinte e substitua REPLACEMETAG pelo nome da tag e REPLACEMECOLOR pela mesma cor do ícone:

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