Tag Icons

[TheBestPessimist]

Bullet tags + tag-color

If you’re using bullet-style tags and

• you want to have the same tag icon and tag text colors
• you want to show the bullet only if there’s no tag icon set

here’s how i did it for the tags books and science-fiction:

End result:

1. Setup of Tag icons component (this component)

2. Setup of a secondary component that must be kept in sync with Tag Icons
   In this component we’re doing 2 things:
   1. Hide the bullet for specific tags
   2. Color the tag text with the same color as the icon

For this to work, we create a new theme component: Tag Icons extra.
In the Common/CSS section:

1. Add the following mixin (needed only once):

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

2. For every tag you want to edit, paste the following and replace REPLACEMETAG with the tag name and REPLACEMECOLOR with the same color as the icon:

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