# 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:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![DogeRTX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogertx/32/222185_2.png) [@DogeRTX](https://meta.discourse.org/u/DogeRTX)\
**Post date:** [5월 28, 2021, 10:43오후 UTC](https://meta.discourse.org/t/tag-icons/109757/104 "2021-05-28T22:43:17Z")

</div>

음, 태그 박스에 맞게 넣는 법은 알아냈고, 모양도 괜찮아 보이는데, 이건 모든 태그 박스에 적용되네요. 특정 태그를 표적하는 방법은 찾았지만, 그 태그 박스를 선택해서 png 아이콘을 넣는 올바른 방법은 무엇일까요?

하나를 선택하려면 -

```plaintext
.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

```

모두 선택하려면 -

```plaintext
a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

```

---

<div class="post-metadata">

**Author:** ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)\
**Post date:** [1월 6, 2022, 1:06오전 UTC](https://meta.discourse.org/t/tag-icons/109757/107 "2022-01-06T01:06:10Z")

</div>

아직 찾고 계신 거라면, 이 사이트에는 국기 SVG 아이콘이 많이 있고, Discourse에 커스텀 SVG 아이콘으로 업로드할 수 있는 방법이 있을 수도 있겠지만 아직 확신은 없습니다.

[https://www.flaticon.com/packs/search?word=flags&shape=lineal-color&order\_by=4&type=icon](https://www.flaticon.com/packs/search?word=flags&shape=lineal-color&order_by=4&type=icon)

---

<div class="post-metadata">

**Author:** ![balupton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/balupton/32/255461_2.png) [@balupton](https://meta.discourse.org/u/balupton)\
**Post date:** [2월 17, 2022, 7:30오전 UTC](https://meta.discourse.org/t/tag-icons/109757/108 "2022-02-17T07:30:04Z")

</div>

완벽하게 작동합니다! 기능 요청 몇 가지 드립니다:

1. 태그 아이콘 목록 입력 필드에서 svg-icons를 자동으로 제안하도록 자동완성 기능을 추가해 주세요.
2. 태그 아이콘 목록을 3열 테이블로 변환하고, 태그와 font-awesome v5 아이콘에 대해 자동완성을 지원해 주세요.
3. [Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome](https://fontawesome.com/v5/search) 링크를 추가해 주세요. 제가 최신 font awesome(현재 v6)을 검색하고 있었는데, 입력이 작동하지 않는 이유가 이 때문이었습니다.
4. font awesome v6를 채택해 주세요.

감사합니다.

---

<div class="post-metadata">

**Author:** ![undasein](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/undasein/32/222392_2.png) [@undasein](https://meta.discourse.org/u/undasein)\
**Post date:** [7월 23, 2022, 7:04오후 UTC](https://meta.discourse.org/t/tag-icons/109757/109 "2022-07-23T19:04:16Z")

</div>

태그 사이에 공백이 없는 이유가 무엇일까요? 모바일에서만 발생해요

> **스크린샷**
>
> ![photo_2022-07-23_21-03-10](https://global.discourse-cdn.com/meta/original/4X/1/2/3/12338cfff78044288a0e9d8a103d194a44547335.jpeg)

---

<div class="post-metadata">

**Author:** ![AquaL1te](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aqual1te/32/201966_2.png) [@AquaL1te](https://meta.discourse.org/u/AquaL1te)\
**Post date:** [8월 27, 2022, 4:58오후 UTC](https://meta.discourse.org/t/tag-icons/109757/111 "2022-08-27T16:58:56Z")

</div>

2개의 태그가 어떤 이유에서인지 작동하지 않습니다. 버그일 수 있을까요? `microphone-stand` SVG 로고를 사용하여 `interview` 태그를, `camcorder` SVG 로고를 사용하여 `lecture` 태그를 생성했습니다. 하지만 둘 다 빈 상태로 남아 있습니다.

 ![Screenshot 2022-08-27 at 18-57-23 Tags - TZM Community Forum](https://global.discourse-cdn.com/meta/original/4X/b/b/9/bb9fa9be2109bbca8e74a7bb64ea4b72210de05b.png)  
 ![Screenshot 2022-08-27 at 18-57-56 Admin - TZM Community Forum](https://global.discourse-cdn.com/meta/original/4X/1/0/9/109dcf8b01cbefe2a7f28a94c97789efd2aee4fa.png)

두 태그 모두 `film` SVG 로고를 사용하도록 설정하면 작동합니다. 이 로고는 이미 다른 태그에 사용했던 것입니다. 따라서 처음 사용하려는 두 개의 로고가 어떤 이유에서인지 승인되지 않는 것 같습니다.

누군가 이 문제를 재현해 볼 수 있을까요? 이 테마 컴포넌트만 설치된 깨끗한 개발 환경에서도 재현할 수 있었습니다. 현재 사용 중인 FontAwesome 버전을 어떻게 확인할 수 있을까요? 아마도 Discourse 버전에는 포함되지 않은 아이콘을 선택하고 있는 것일 수 있습니다. [5.15](https://github.com/discourse/discourse/blob/main/package.json#L10) 버전일 것 같습니다. 해당 아이콘들은 5.11 또는 6.0에 포함되었으므로, 당연히 포함되어 있어야 합니다.

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [8월 31, 2022, 5:47오후 UTC](https://meta.discourse.org/t/tag-icons/109757/112 "2022-08-31T17:47:28Z")

</div>

저도 이들을 작동시킬 수 없으니, 사용 가능한 세트에 포함되지 않은 경우일 수 있습니다.

---

<div class="post-metadata">

**Author:** ![ALDT\_nè](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aldt_n%C3%A8/32/263313_2.png) [@ALDT\_nè](https://meta.discourse.org/u/ALDT_n%C3%A8)\
**Post date:** [2월 13, 2023, 2:19오후 UTC](https://meta.discourse.org/t/tag-icons/109757/115 "2023-02-13T14:19:52Z")

</div>

안녕하세요! 👋🏻

자연 이미지와 함께 아이콘을 사용할 수 있는지 궁금합니다.

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [3월 5, 2023, 3:16오후 UTC](https://meta.discourse.org/t/tag-icons/109757/116 "2023-03-05T15:16:17Z")

</div>

태그 그룹의 태그와 함께 작동하나요?

비공개 카테고리에서 tag1을 사용하여 테스트해 봤는데, 정상적으로 작동합니다. 하지만 태그 그룹의 태그는 작동하지 않는 것 같습니다?

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [3월 7, 2023, 5:22오전 UTC](https://meta.discourse.org/t/tag-icons/109757/117 "2023-03-07T05:22:42Z")

</div>

저도 비슷한 문제를 겪고 있습니다. 태그가 10자를 초과하면 아이콘이 표시되지 않는 것 같습니다.

태그 그룹 문제를 파악했습니다. 태그 그룹을 직접 카테고리에 추가하는 것보다, 그룹에서 태그를 직접 추가해야 하는 것 같습니다?

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 26, 2023, 11:13오전 UTC](https://meta.discourse.org/t/tag-icons/109757/119 "2023-10-26T11:13:53Z")

</div>

사이드바를 제외한 다른 어디에서도 태그 아이콘이 표시되지 않습니다. 이런 현상의 원인을 아시는 분 계신가요? 컴포넌트를 다시 설치해 보고, 기본 테마와 함께 해당 컴포넌트만 사용해도 여전히 해결되지 않았습니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/b/0/fb042d6073d052f288313aca8c5c83957c77ff78.png)

---

<div class="post-metadata">

**Author:** ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)\
**Post date:** [10월 26, 2023, 11:50오전 UTC](https://meta.discourse.org/t/tag-icons/109757/120 "2023-10-26T11:50:51Z")

</div>

확인차 여쭤봅니다. 테마 컴포넌트의 `svg icons` 설정에 아이콘을 추가하셨나요?

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 28, 2023, 12:03오후 UTC](https://meta.discourse.org/t/tag-icons/109757/121 "2023-10-28T12:03:56Z")

</div>

네, 확인해 봤는데 사이드바에서 아이콘 자체가 왼쪽에 표시되는 것을 볼 수 있지만, 다른 곳에는 어디에도 표시되지 않아요:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/7/3/77336443c03f630c2c14ba7b879303f35d36cd2c.png)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [10월 28, 2023, 2:03오후 UTC](https://meta.discourse.org/t/tag-icons/109757/122 "2023-10-28T14:03:10Z")

</div>

안녕하세요, Darojax님. 환영합니다! 👋

제 환경에서는 이 문제를 재현할 수 없습니다. 🤔

CSS가 개입되지 않거나 템플릿이 덮어쓰여지지 않는 한, 태그는 어디에서나 동일한 방식으로 렌더링됩니다.

가능하다면 포럼 URL을 공유해 주시겠습니까?

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 28, 2023, 4:02오후 UTC](https://meta.discourse.org/t/tag-icons/109757/123 "2023-10-28T16:02:54Z")

</div>

안녕하세요, 답변 주셔서 감사합니다. 불행히도 현재 포럼은 아직 개발 중이며 인터넷에 공개되어 있지 않습니다. 공개되거나 문제가 해결되면 다시 연락드리겠습니다.

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [10월 28, 2023, 4:06오후 UTC](https://meta.discourse.org/t/tag-icons/109757/124 "2023-10-28T16:06:52Z")

</div>

좋아요, 괜찮습니다. 현재 Discourse 버전을 정확히 알려주시고, 활성화된 플러그인/컴포넌트를 나열해 주시겠어요? 그러면 힌트를 얻을 수 있을지도 모릅니다.

CSS 수정 없이 기본 테마에서 Tag Icons 컴포넌트만 활성화해 보겠습니다. 그렇게 해서 문제가 발생하지 않는다면, 원인이 무엇인지 파악할 수 있을 것입니다.

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 28, 2023, 4:14오후 UTC](https://meta.discourse.org/t/tag-icons/109757/125 "2023-10-28T16:14:40Z")

</div>

물론입니다:

**설치된 Discourse 버전**  
3.2.0.beta2  
([be04154838](https://github.com/discourse/discourse/commits/be04154838c2e5a38cd544770d3290a9e2801241))

**최신 버전**  
3.2.0.beta2

새로운 기본(Default) 테마를 생성했으며, GitHub에서 직접 설치한 Tag icons 컴포넌트만 사용하고 있습니다:

> **[GitHub - discourse/discourse-category-icons: A theme component to display icons next to...](https://github.com/discourse/discourse-category-icons)**
>
> A theme component to display icons next to category links in Discourse.

그리고 두 가지 플러그인:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/d/a6dd027fd05589ba85cd84eabd28e64574f85081.png)

discourse-landing-pages

> **[GitHub - paviliondev/discourse-landing-pages: Adds landing pages to Discourse](https://github.com/paviliondev/discourse-landing-pages)**
>
> Adds landing pages to Discourse

docker\_manager

> **[GitHub - discourse/docker\_manager: Plugin for use with discourse docker image](https://github.com/discourse/docker_manager)**
>
> Plugin for use with discourse docker image

기타 CSS나 HTML 등 다른 사용자 정의 설정은 전혀 하지 않았습니다.

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 28, 2023, 5:09오후 UTC](https://meta.discourse.org/t/tag-icons/109757/126 "2023-10-28T17:09:22Z")

</div>

좋아요, 문제를 찾았어요. 이 플러그인은 대문자로 시작하는 태그를 처리하지 못하는 것 같습니다. 태그 이름을 모두 소문자로 변경했더니 이제 의도대로 작동합니다. 제 생각에는 대문자로 시작하는 태그가 더 깔끔해 보이는데, 이 문제를 처리해 주시면 좋겠습니다. 🙂 그래도 훌륭한 컴포넌트를 만들어 주셔서 감사합니다.

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [10월 28, 2023, 6:06오후 UTC](https://meta.discourse.org/t/tag-icons/109757/127 "2023-10-28T18:06:36Z")

</div>

이제 작동하길 잘했다. 그런데 그 태그들은 어떻게 만들었어? 보통은 소문자로 강제되는데.🤔

---

<div class="post-metadata">

**Author:** ![Darojax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darojax/32/335774_2.png) [@Darojax](https://meta.discourse.org/u/Darojax)\
**Post date:** [10월 28, 2023, 6:10오후 UTC](https://meta.discourse.org/t/tag-icons/109757/128 "2023-10-28T18:10:18Z")

</div>

관리자 패널에서 이 기능을 설정할 수 있습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/e/4/ae483c9e9dffe44991fdf231bbbbf60b72d24a32.png)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [10월 28, 2023, 6:17오후 UTC](https://meta.discourse.org/t/tag-icons/109757/129 "2023-10-28T18:17:08Z")

</div>

맞아요, 제 실수였어요. 이 설정을 깜빡했네요. 😄

문제가 어디서 나는지 알고 있어요. 나중에 수정안을 제안할게요. 👍

[이전 페이지](https://meta.discourse.org/t/tag-icons/109757.md?page=2)

[다음 페이지](https://meta.discourse.org/t/tag-icons/109757.md?page=4)