Install this theme component
Desktop
Mobile
This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
Name
Descriptions
header links
List of links with the following properties: title, icon, URL, view and target
add whitespace
If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component
Svg icons
Include FontAwesome 6 icon classes for each icon used in the list.
Notes:
If the icon you want to use does not show up, then add it to the svg_icons setting in the component. If you add new icons, they need to be prefixed with FontAwesome 6 prefixes like fab, far and fas.
This is based on @techAPJ ’s awesome tutorial here: (Superseded) Add new link on header beside search icon , and on @vinothkannans ’s Brand header theme which was a great reference for the structure of this component.
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Last edited by @Moin 2025-07-19T08:10:47Z
Check document Perform check on document:
93개의 좋아요
위에서 몇몇 분들이 언급한 것과 유사한 문제를 겪고 있습니다. 아이콘이 표시되지 않지만 버튼은 클릭할 수 있습니다. 아이콘 설정을 수정하여 (예를 들어) 단순히 "facebook-f"가 아닌 "fab-facebook-f"라고 입력했습니다. 트위터와 제 다른 웹사이트에서는 문제가 없는데, 페이스북과 링크드인에서는 여전히 작동하지 않습니다.
페이스북은 어떻게 설정하는지 파악했지만, 링크드인은 아직 해결이 안 됩니다. 또한, 커스텀 아이콘을 만들 수 있는 방법이 있을까요? 회사 로고를 업로드해서 아이콘으로 사용할 수 있을까요?
MichelleBarnett:
저도 비슷한 문제를 겪고 있습니다
저도요 – 디스코드 아이콘 관련해서요.
최신 버전에는 왜 ‘SVG 아이콘’ 섹션이 없나요?
저는 이렇게 보입니다:
그 설정 스크린샷은 텍스트 링크를 표시하는 데 사용되는 Custom Header Links - #84 컴포넌트처럼 보입니다. 아이콘은 아닙니다.
컴포넌트 이름이 혼란스럽게 지어졌다는 점을 이해할 수 있습니다:
https://github.com/discourse/discourse-header-links - 아이콘 링크 (이 주제)https://github.com/discourse/discourse-custom-header-links - 텍스트 링크 (Custom Header Links )
@Johani 님, 이쪽 이름에 'icon’을 추가하는 것이 어떨까요?
4개의 좋아요
아, 정말로 해결됐네요. 네 - 진짜 헷갈리더라고요. 이름 변경 기능이면 최고일 것 같아요!
수정: 최근 업데이트에서 디스코드의 클래스 이름에 fab-가 중간에 추가된 것 같은데 (예: 아이콘 색상을 변경하고 싶을 때. @OP님이 네이티브 기능으로 추가해 주시면 좋겠어요 - 알아채기 좀 어려웠거든요).
1개의 좋아요
Johani
8월 5, 2020, 1:41오후
93
MichelleBarnett:
하지만 아직 링크드인을 가져올 수 없어요
LinkedIn의 경우 이 설정에서 아이콘 이름으로 fab-linkedin을 사용할 수 있습니다
하지만 해당 아이콘은 Discourse가 기본적으로 사용하는 아이콘 세트에 포함되어 있지 않으므로, 컴포넌트의 다른 설정에도 추가해야 합니다.
제 경우 결과는 다음과 같습니다
네, 이 주제 안에서 커스텀 아이콘을 추가하는 방법에 대한 섹션이 있습니다.
See also: We're upgrading our icons to Font Awesome 6!
We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers.
Here is a quick rundown of the changes:
using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details
since…
그 설정을 완료하면 이 테마 컴포넌트에서 추가한 모든 커스텀 아이콘을 사용할 수 있게 됩니다. 해당 내용을 확인해 보시고 문제가 발생하면 알려 주세요.
해당 변경 사항과 몇 가지 구현 개선 사항을 여기에 반영했습니다
committed 01:30PM - 05 Aug 20 UTC
dylanh724:
아이콘 색상을 변경하고 싶다면
새로운 업데이트는 사용자가 사용하는 제목에 기반하여 각 링크에 고유한 접두사 클래스를 추가합니다. 예를 들어
facebook, fab-facebook, https://facebook.com, vdm, blank
을 사용하면 링크에는
header-icon-facebook
클래스가 부여됩니다.
템플릿은 header-icon-ICON-TITLE입니다.
이를 통해 다음과 같은 CSS로 타겟팅할 수 있습니다
.d-header-icons {
.header-icon-facebook svg {
fill: #4267b2;
}
.header-icon-twitter svg {
fill: #1da1f2;
}
// add more icons here
}
그 결과 다음과 같은 모습이 됩니다
4개의 좋아요
도와주셔서 감사합니다. "Header Links"와 “Svg Icons” 두 카테고리 모두에 "fab-linkedin"을 사용해 보았지만, 사진에서 보시는 것처럼 여전히 이유를 알 수 없이 작동하지 않습니다.
회색 원이 바로 LinkedIn 로고가 표시되어야 할 곳입니다. 해결할 다른 방법이 있을까요?
Johani
8월 6, 2020, 12:09오후
95
왜 작동하지 않는지 정확히 확신은 없습니다. 제 설정은 다음과 같습니다.
Facebook, fab-facebook, https://facebook.com, vdm, blank
Twitter, fab-twitter, https://twitter.com, vdm, blank
LinkedIn, fab-linkedin, https://www.linkedin.com, vdm, blank
그리고
fab-facebook
fab-linkedin
fab-twitter
그리고 제가 보고 있는 결과는 다음과 같습니다.
링크드인 아이콘에 대해 동일한 작업을 시도해 보시고, 문제가 여전히 지속되는지 알려주시겠습니까?
1개의 좋아요
지금까지 이렇게 시도해 보았고, 다른 아이콘들도 여러 번 바꿔 봤습니다. 현재 설정은 다음과 같습니다.
설정:
웹사이트:
동작하는 아이콘은 "fab-"를 사용하지 않는 것들뿐인데, 이게 좀 이상하게 느껴집니다. 여러분의 생각을 알려주세요.
pmusaraj
8월 6, 2020, 5:36오후
97
미셸님, 안녕하세요.
고객이셔서 사이트로 들어가서 직접 확인해 보았고, 해당 문제를 수정해 두었습니다. 테마 컴포넌트를 업데이트하고 아이콘 설정을 올바르게 조정했으니, 이제 모두 정상적으로 작동할 것입니다.
5개의 좋아요
한 가지 더 질문/요청이 있습니다. 처음에는 이 링크들이 새 탭에서 열렸는데, 지금은 같은 탭에서 열립니다. 설정은 이미 "blank"으로 되어 있는데, 이 외에 어떻게 변경할 수 있을까요?
2개의 좋아요
pmusaraj
8월 7, 2020, 2:27오전
100
이것은 회귀 문제로 보입니다. 조만간 수정하겠습니다.
1개의 좋아요
Johani
8월 7, 2020, 9:09오전
101
맞습니다. 최근 변경 사항에서 target 속도를 실수로 누락했습니다.
사용자 측에서 조치할 필요는 없습니다. 해당 컴포넌트를 수정하여 사용자의 사이트에 업데이트했습니다. 이제 모든 것이 정상적으로 작동할 것입니다. 문제를 보고해 주셔서 감사합니다
7개의 좋아요
Canapin
9월 25, 2020, 9:13오후
102
안녕하세요,
사용자 정의 아이콘이 로그인 및 가입 버튼의 오른쪽에 위치해 있는데, 일반적으로 왼쪽에 배치되는 것이 더 적합하다고 생각합니다.
3개의 좋아요
Font Awesome Icons 의 4.7.0 버전 아이콘 중 일부는 "Header links"의 올바른 부분에 이름(예: car)만 입력하면 작동합니다. 일부 아이콘은 표시되지 않습니다(예: fa-comments-o). 또한 일부 아이콘은 "Svg icons"를 사용할 필요가 없습니다(예: home)가, 일부는 필요합니다(예: car).
Find Icons with the Perfect Look & Feel | Font Awesome 에서 시도해 본 5 버전 아이콘은 하나도 작동하지 않았습니다. "Header links"와 "Svg icons"에 fa- 이름을 입력해 보았지만 효과가 없었습니다. 다만 기본으로 제공되던 fab-facebook(등) 아이콘은 작동합니다.
제가 어디를 잘못하고 있는 걸까요?
수정: 정확성을 위해 첫 단락을 수정했습니다.
rolando
10월 10, 2020, 12:31오후
104
이것에 대해 정말 감사합니다 @Johani . 아주 잘 작동하며 제 경우 “사이트로 돌아가기” 링크를 위한 “미적으로” 만족스러운 해결책을 제공해 주셨습니다.
다만, 모바일용 왼쪽 햄버거 메뉴 컴포넌트도 함께 사용 중인데, 이로 인해 .d-header의 해당 부분이 깨지는 문제를 겪고 있습니다.
두 가지가 함께 작동하도록 만드는 방법에 대해 아이디어가 있으신가요? 정말 감사하겠습니다.
misterjtc
10월 11, 2020, 2:06오후
105
저도 아이콘이 표시되지 않는 문제를 겪고 있습니다. 제가 뭘 잘못하고 있는지 모르겠네요. 설정에서 이렇게 되어 있습니다:
결과는 이렇게 나옵니다:
