Iconos de etiquetas

[TheBestPessimist]

Etiquetas con viñetas + color de etiqueta

Si estás utilizando etiquetas con estilo de viñetas y

• quieres que el icono de la etiqueta y el texto de la etiqueta tengan el mismo color
• quieres mostrar la viñeta solo si no hay ningún icono de etiqueta configurado

así es como lo hice para las etiquetas books y science-fiction:

Resultado final:

1. Configuración del componente Iconos de etiquetas (este componente)

2. Configuración de un componente secundario que debe mantenerse sincronizado con Iconos de etiquetas
   En este componente estamos haciendo dos cosas:
   1. Ocultar la viñeta para etiquetas específicas
   2. Colorear el texto de la etiqueta con el mismo color que el icono

Para que esto funcione, creamos un nuevo componente de tema: Iconos de etiquetas extra.
En la sección Common/CSS:

1. Añade el siguiente mixin (necesario solo una vez):

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

2. Para cada etiqueta que quieras editar, pega lo siguiente y reemplaza REPLACEMETAG con el nombre de la etiqueta y REPLACEMECOLOR con el mismo color que el icono:

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