# Custom Header Links (icons)
**URL:** https://meta.discourse.org/t/custom-header-links-icons/86307
**Category:** Theme component
**Tags:** official, custom-header-icons
**Created:** [4월 27, 2018, 2:00오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307 "2018-04-27T14:00:38Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 23, 2020, 6:16오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/108 "2020-10-23T06:16:32Z")
아래의 내 답변은 현재 삭제된 게시물에 대한 것이었습니다. 해당 게시물에는 다음 내용이 포함되어 있었습니다. 저는 여전히 FA5 아이콘에 관심이 있습니다…
```plaintext
이 플러그인으로 아이콘을 추가할 수 있을까요? 더 이상 작동하지 않아서 묻습니다. Facebook, Twitter, Instagram 아이콘을 추가해야 합니다.
여기에는 SVG 아이콘 옵션이 없습니다: [screenshot]
```
이전에 작동했나요? 무엇이 변경되었고, 무엇을 시도해 보셨나요?
혹시 이 플러그인의 아이콘이 없는 버전을 다운로드하신 건 아닌가요?
저는 Font Awesome 4 아이콘은 작동하게 만들 수 있었지만, Font Awesome 5는 작동하지 않았습니다(내장된 2~3개를 제외하고): 위 게시물을 참조하세요.
---
### Author:  [@Brajmohan\_Kumar](https://meta.discourse.org/u/Brajmohan_Kumar)
#### Post date: [10월 23, 2020, 6:26오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/109 "2020-10-23T06:26:17Z")
네, 실제로 아이콘이 없는 버전을 다운로드한 것이었습니다. 조사해 본 후에야 그걸 깨달았어요. 지금은 [discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)와 함께 잘 작동하고 있습니다.
> [@Jonathan5](#):
>
> 혹시 이 플러그인의 아이콘이 없는 버전을 다운로드하신 건 아닌가요?
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 23, 2020, 6:28오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/110 "2020-10-23T06:28:07Z")
정말 좋습니다. 혹시 사용하신 설정을 공유해 주실 수 있을까요? 제가 어디를 잘못하고 있었는지 확인해 보고 싶어요. 감사합니다.
---
### Author:  [@Brajmohan\_Kumar](https://meta.discourse.org/u/Brajmohan_Kumar)
#### Post date: [10월 23, 2020, 6:35오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/112 "2020-10-23T06:35:31Z")
네, 여기 있습니다: [Screenshot by Lightshot](https://prnt.sc/v52mx0)
`Facebook, fab-facebook, https://www.facebook.com/, vdo, blank`
`Twitter, fab-twitter, https://www.twitter.com/, vdo, blank`
`Instagram, fab-instagram, https://www.instagram.com/, vdo, blank`
도움이 되는지 알려주세요 🙂
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 23, 2020, 6:38오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/113 "2020-10-23T06:38:37Z")
매우 감사합니다. 이 세 가지 내장 아이콘은 저에게도 잘 작동했습니다.
다른 FA5 아이콘도 시도해 보시고, 어떻게 되는지 알려주실 수 있을까요?
---
### Author:  [@Brajmohan\_Kumar](https://meta.discourse.org/u/Brajmohan_Kumar)
#### Post date: [10월 23, 2020, 6:55오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/114 "2020-10-23T06:55:01Z")
LinkedIn을 시도해 봤는데 동작합니다: [Screenshot by Lightshot](https://prnt.sc/v52zgv)
FA5 아이콘을 추가하는 경우, SVG 아이콘 섹션에서 목록에 사용되는 각 아이콘에 대해 FontAwesome 5 아이콘 클래스를 포함시켜야 합니다: [Screenshot by Lightshot](https://prnt.sc/v5314n)
감사합니다!
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 23, 2020, 7:26오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/115 "2020-10-23T07:26:55Z")
정말 감사드립니다. fab 아이콘이 아닌 아이콘에서도 작동하나요?
---
### Author:  [@Brajmohan\_Kumar](https://meta.discourse.org/u/Brajmohan_Kumar)
#### Post date: [10월 23, 2020, 12:23오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/116 "2020-10-23T12:23:15Z")
> [@Jonathan5](#):
>
> fab- 아이콘이 아닌 경우에도 작동하나요?
아니요, fab- 없이 작동하지 않았습니다.
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 23, 2020, 12:52오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/117 "2020-10-23T12:52:13Z")
> [@Johani](#):
>
> 아이콘은 `fa-`, `fab-`, `fas-` 또는 `far-` 부분을 제외한 [FontAwesome 5 (무료) 아이콘](https://fontawesome.com/icons) 이름이면 무엇이든 사용할 수 있습니다.
하지만 이것이 잘못된 것 같다는 생각이 듭니다. 만약 틀린 것이라면 미리 사과드립니다…
예를 들어, [Address Card Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/address-card?style=regular) 의 주소 카드 아이콘을 사용하려면 `far fa-address-card`를 `far-address-card`로 변경해야 합니다(그리고 이를 `svg icon subset` 설정에 추가해야 합니다). 단순히 `fa-`를 제외하고만 사용하면 작동하지 않습니다.
이것은 [FontAwesome 5 svg subset WIP - discourse/discourse@bf3f958 - GitHub](https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe) 와 [FontAwesome 5 svg subset WIP - discourse/discourse@bf3f958 - GitHub](https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe) 를 살펴본 후에야 알게 되었습니다.
---
### Author:  [@Karthikk\_Vijay](https://meta.discourse.org/u/Karthikk_Vijay)
#### Post date: [1월 2, 2021, 8:46오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/118 "2021-01-02T20:46:08Z")
기존 헤더 링크를 제거하는 방법이 있을까요?
---
### Author:  [@Pandabear](https://meta.discourse.org/u/Pandabear)
#### Post date: [2월 2, 2021, 9:41오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/119 "2021-02-02T09:41:49Z")
설치를 완료했습니다.
이제 이 아이콘 [Rocket Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/rocket?style=solid) 을 차량 카테고리 링크에 추가하려고 합니다.
다음과 같이 설정했습니다:
모바일/데스크톱 링크, fas-rocket, c / vehiculos / 69, vdm, blank
그리고 아래에
fas-rocket
을 입력했습니다.
하지만 아이콘이 보이지 않는데, 아이콘을 어떻게 업로드해야 하나요?
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2월 2, 2021, 5:49오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/120 "2021-02-02T17:49:15Z")
> [@Pandabear](#):
>
> fas-rocket
"rocket"만 입력해 보세요.
이 추측은 [FontAwesome 5 svg subset WIP - discourse/discourse@bf3f958 - GitHub](https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe%EC%97%90%EC%84%9C) "rocket"이라는 단어를 검색한 것에 기반합니다.
---
### Author:  [@Pandabear](https://meta.discourse.org/u/Pandabear)
#### Post date: [2월 3, 2021, 12:21오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/121 "2021-02-03T12:21:22Z")
감사합니다. 이 아이콘이 사용 가능한지 아시나요?
> **[Masks Theater Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/theater-masks?style=solid)**
>
> Download the Masks Theater filled icon as a free SVG or PNG. A bold Classic Solid style icon for learning platforms, course sites, and educational tools.
수동으로 추가해야 할 것 같습니다. 제게는 조금 어렵네요.
이렇게 하면 될까요?
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643):
>
> See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) We will shortly merge into master a [branch](https://github.com/discourse/discourse/tree/fontawesome5) 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](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details since…
_플러그인에서_ : SVG 스프라이트 파일을 `plugins/your-plugin-name/svg-icons` 폴더에 포함시키면 됩니다. 서버를 재시작(개발 환경인 경우)하거나 Docker 컨테이너인 경우 사이트를 다시 빌드하면 사용자 정의 아이콘이 자동으로 사용 가능해집니다.
Digital Ocean를 사용하고 있는 포럼에 마스크 아이콘을 추가하는 방법에 대해 초보자도 이해할 수 있도록 요약해 주실 수 있을까요? 감사합니다
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2월 3, 2021, 12:29오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/122 "2021-02-03T12:29:19Z")
방금 임시로 아이콘 중 하나를 변경해서 내 포럼에서 테스트해 보았습니다. `header links`에서 아이콘 이름을 “rocket”(따옴표 제외)으로 호출하면 아이콘이 정상적으로 작동합니다. 작동하지 않는다면 나머지 줄에 문제가 있을 수 있습니다. `svg icons`에 추가할 필요는 없습니다.
---
### Author:  [@Pandabear](https://meta.discourse.org/u/Pandabear)
#### Post date: [2월 3, 2021, 12:31오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/123 "2021-02-03T12:31:09Z")
네, 정말 감사합니다. 로켓이 완벽하게 작동했습니다. 그런데 이제 이걸 추가하고 싶어요:
> **[Masks Theater Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/theater-masks?style=solid)**
>
> Download the Masks Theater filled icon as a free SVG or PNG. A bold Classic Solid style icon for learning platforms, course sites, and educational tools.
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2월 3, 2021, 12:35오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/124 "2021-02-03T12:35:37Z")
죄송합니다. 여전히 원래 아이콘을 말씀하시는 줄 잘못 알고 있었습니다. 코드에 극장 아이콘에 대한 언급이 없어서 작동하지 않습니다.
FA5 아이콘을 추가하기 위해 여러 가지 방법을 시도해 보았지만 성공하지 못했습니다. 여기에 제시된 제안들은 제 환경에서는 모두 작동하지 않았습니다.
`svg icons`에 무엇을 넣어도 변화가 없었습니다. 특히 비교적 최근 게시물에서 언급된 Instagram 아이콘은 코드에 포함되어 있어 작동하는 것으로 보입니다. (`svg icons`에 추가했기 때문이 아니라, 코드에 이미 존재하기 때문입니다.)
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [4월 21, 2021, 7:41오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/125 "2021-04-21T07:41:16Z")
해당 컴포넌트에 대한 보안 보고서를 받았습니다. ` rel="noreferer, noopener"` 코드를 사용하도록 구성할 수 있을까요?
---
### Author:  [@hollosch](https://meta.discourse.org/u/hollosch)
#### Post date: [5월 1, 2021, 9:27오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/126 "2021-05-01T21:27:36Z")
최신 버전의 discourse로 업데이트한 후 아이콘이 더 이상 표시되지 않습니다. 문제의 원인이 무엇일 수 있을까요?
---
### Author:  [@Mark\_Walkom](https://meta.discourse.org/u/Mark_Walkom)
#### Post date: [5월 20, 2021, 3:23오전 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/127 "2021-05-20T03:23:34Z")
이것을 [저희 인스턴스](https://discuss.elastic.co/)에 추가했는데 정말 훌륭합니다. 이 플러그인을 만들어 주셔서 진심으로 감사드립니다!
새로운 아이콘과 기존 기본 아이콘 사이에 여백을 추가할 수 있는 설정을 지원할 수 있을까요? `,,,,`를 추가해서 임시로 해결할 수는 있지만, 그렇게 하면 테마 설정 페이지로 링크가 걸리는 문제가 있습니다. 다만, 그 외관 자체는 저희가 원하는 스타일입니다.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [5월 20, 2021, 9:32오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/128 "2021-05-20T21:32:59Z")
그렇게 들으니 기쁩니다 👍
> [@Mark\_Walkom](#):
>
> 새로운 아이콘과 기존 기본 아이콘 사이에 여백을 추가할 수 있는 설정이 가능할까요?
물론이죠, 여기에서 해당 설정을 추가했습니다(기본값: 꺼짐)
>
>
> This commit adds a toggle that allows you to add some whitespace between the Dis…course header icons and the icons added via this component. The space is only added on desktop due to lack of space on mobile devices.
설정에서 빈 설정 항목을 제거하고 컴포넌트를 업데이트한 뒤, 새로운 설정을 켜면 페이지를 새로고침한 후 작동하기 시작할 것입니다.
[Previous page](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=1)
[Next page](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=3)