# Tag Icons

**URL:** <https://meta.discourse.org/t/tag-icons/109757>\
**Category:** Theme component\
**Tags:** official, tag-icons\
**Created:** [2월 21, 2019, 1:56오후 UTC](https://meta.discourse.org/t/tag-icons/109757 "2019-02-21T13:56:48Z")\
**Posts on this page:** 1\
**Showing post:** 68

<div class="post-metadata">

**Author:** ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)\
**Post date:** [2월 15, 2021, 11:13오전 UTC](https://meta.discourse.org/t/tag-icons/109757/68 "2021-02-15T11:13:40Z")

</div>

### 불릿 태그 + 태그 색상

불릿 스타일 태그를 사용하면서

- \_태그 아이콘\_과 \_태그 텍스트\_의 색상을 동일하게 설정하고 싶거나
- \_태그 아이콘\_이 설정되지 않은 경우에만 불릿을 표시하고 싶다면

`books`와 `science-fiction` 태그에 대해 제가 적용한 방법은 다음과 같습니다:

최종 결과:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0dbe1c95fb6f31b0a2d7d721eb97cdec04be193b.png)

1. `Tag icons` 컴포넌트 설정 (이 컴포넌트)

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/7/97bd661b9737393c4710883d131c61d6335ded2d.png)

1. `Tag Icons`와 동기화되어야 하는 보조 컴포넌트 설정  
이 컴포넌트에서는 다음 두 가지를 수행합니다:
  1. 특정 태그에 대한 불릿 숨기기
  2. 아이콘과 동일한 색상으로 태그 텍스트 색상 설정

이것이 작동하려면 새로운 테마 컴포넌트인 `Tag Icons extra`를 생성합니다.  
`Common/CSS section`에서:

1. 다음 믹신을 추가합니다 (한 번만 필요함):

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

```

1. 수정하려는 각 태그에 대해 아래 내용을 붙여넣고 `REPLACEMETAG`를 태그 이름으로, `REPLACEMECOLOR`를 아이콘과 동일한 색상으로 교체하세요:

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

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/f/efbeae227166f9f0c1162da992c9a9c1ff5070e1.png)

---

_[View the full topic](https://meta.discourse.org/t/tag-icons/109757)._