Install this theme component
Here is an example of how this would look, with tag style set to the default (simple):
Here is how this looks with tag style set to box:
Name
Description
tag icon list
Enter comma-delimited configuration for tags, in the format “tag-slug,icon,iconColor”. Icon color is optional.
svg icons
List of FontAwesome 6 icons used in this theme component
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Last edited by @tobiaseigen 2025-08-27T06:57:11Z
Check document Perform check on document:
81개의 좋아요
Does this also work with custom svg?
2개의 좋아요
pmusaraj
2월 21, 2019, 2:04오후
4
Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons - #61 by pmusaraj for details.
7개의 좋아요
Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?
pmusaraj
3월 19, 2019, 12:47오전
15
Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.
3개의 좋아요
Could the icon be added to the dropdown menu as well?
9개의 좋아요
이렇게 하면 태그에 사용자 지정 아이콘을 추가할 수 있지만, 태그의 박스 색상을 변경하려면 어떻게 해야 하나요?
3개의 좋아요
pmusaraj
7월 21, 2020, 4:06오후
48
CSS를 사용하여 이를 수행할 수 있습니다. 예를 들어, 아래 코드는 “theme-component” 텍스트 색상을 빨간색으로 설정합니다:
.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}
(이것은 단순히 예시를 위한 것이며, 여러분은 직접 CSS를 작성해야 합니다.)
2개의 좋아요
알겠습니다. 감사합니다. 결국 CSS에서 모든 태그를 이름별로 나열하고 각각의 색상을 지정해야 하는군요. 테마 컴포넌트처럼 관리자 패널에서 쉼표로 구분된 목록을 제공하고 아이콘처럼 16진수(hex) 코드를 입력할 수 있다면 좋았을 텐데 말이죠.
CSS를 통해 태그 그룹의 모든 태그에 색상을 설정할 수 있는 방법이 있을까요?
4개의 좋아요
HeyRR
8월 29, 2020, 6:39오후
50
결국 이런 결과가 나왔습니다:
혹시 이런 결과를 보신 분 계신가요?
pmusaraj
8월 31, 2020, 12:15오후
51
사이트 설정에서 "태그 스타일"을 찾아 '단순’으로 변경하면 회색 불릿이 제거됩니다.
HeyRR
8월 31, 2020, 5:32오후
52
알겠습니다. 감사합니다. 다만 다른 태그들은 기본 회색 목록 기호를 유지해야 합니다. 특정 태그에 대해서만 목록 기호를 제거하여 이를 구현했습니다:
a[data-tag-name="test1"]::before {
display:none!important;
}
3개의 좋아요
훌륭한 개선 아이디어네요. 작성자에게 조언을 구하고 싶은 것이 있습니다. 저는 지루한 태그를 좀 더 다듬어 보고 싶은데, 그중 일부는 언어별로 게시물을 태그하는 데 사용 중입니다(예: “castellano”, “deutsch” 등). 여기에 작은 국기 아이콘을 붙이고 싶은데요, 위에서 설명한 대로 커스텀 .svg 파일을 업로드하는 것이 올바른 방법일까요? 아니면 미리 설정된 아이콘 세트나 Discourse 내장 이모지 세트를 사용할 수도 있을까요?
2개의 좋아요
pmusaraj
10월 29, 2020, 6:08오후
54
국기에는 이모지가 적합해 보이지만, 이 컴포넌트는 이모지가 아닌 Font Awesome과 같은 아이콘 세트의 아이콘을 사용합니다.
태그 라벨에 이모지를 직접 추가하는 방법을 시도해 볼 수 있습니다. 로컬에서 이 방법을 시도해 보았는데, 태그에는 공백을 사용할 수 없다는 점이 까다롭습니다. 예시:
대시(-)를 사용하는 것이 괜찮다면, 그것이 가장 좋은 방법입니다.
4개의 좋아요
오, 진짜 꽤 깔끔하네요. 대시만 빼면
pmusaraj
10월 29, 2020, 6:22오후
56
네, 이모지만 사용해도 괜찮습니다… 하지만 게시글 작성 시 태그 드롭다운에서 검색으로 쉽게 찾기는 어려울 것입니다.
2개의 좋아요
아, 한 가지 더 좀 멍청한 질문을 해도 될까요: 위에서 프랑스어처럼 이모지가 작동하게 하는 방법은 무엇인가요? ":sweden:-svenska"라는 태그를 만들어 보았지만 스웨덴 국기로 번역되지 않아요.
pmusaraj
10월 29, 2020, 6:29오후
58
이모지 기호를 사용해야 합니다(모바일의 경우, 이모지 키보드로 전환하면 됩니다).
3개의 좋아요
오, 디스커스의 이모지인 줄 알았어요. 그래요, 모바일로 바꿔야겠네요. 이걸 어떻게든 쓸 수 있을 줄 알았거든요. 작동했어요, 감사합니다!
3개의 좋아요
renato
11월 29, 2020, 12:28오전
60
제 이해가 맞다면, tag renderer 내에서 태그가 속한 그룹을 쉽게 파악하는 방법이 없나요?
이것은 정말 좋겠습니다. 이전에 커스텀 CSS 방식을 사용하다가 이 테마 컴포넌트로 전환하면서, 태그 그룹 지원 이전에는 아이콘이 설정되지 않은 모든 태그에 폴백 아이콘 을 적용했습니다. 그리고 이것이 제가 가장 아쉬워하는 부분입니다.
discourse-category-icons가 이를 지원하므로, replaceCategoryLinkRenderer가 대체하는 렌더러는 카테고리 드롭다운에 사용되고, replaceTagRenderer가 대체하는 렌더러는 태그 드롭다운에는 사용되지 않는다고 추측합니다. 맞나요? 그렇다면 아마도 코어 변경이 필요할까요? 컴포저의 태그 드롭다운은 아이콘과 함께 대체된 렌더러를 사용하고 있습니다.
2개의 좋아요
(기본 태그 아이콘은 여전히 남아 있습니다)
그건 아마도 괜찮을 것 같아요. 그냥 플래그 이모지만 사용하는 태그도 시도해볼 가치가 있을지도 모르겠네요…