# Introducing Font Awesome 5 and SVG icons

**URL:** https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643
**Category:** Announcements
**Tags:** new-feature
**Created:** [11월 9, 2018, 12:55오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643 "2018-11-09T00:55:16Z")
**Posts on this page:** 16
**Page:** 7

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [9월 4, 2023, 4:31오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/126 "2023-09-04T16:31:55Z")

</div>

11개의 게시글이 새로운 주제로 분리되었습니다: [기존 SVG 아이콘을 사용자 지정 아이콘으로 교체하는 방법?](https://meta.discourse.org/t/how-to-replace-an-existing-svg-icon-with-a-custom-one/277743)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [9월 4, 2023, 4:29오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/137 "2023-09-04T16:29:48Z")

</div>

5개의 게시물이 새 주제로 분리되었습니다: [Font Awesome에서 RSS 아이콘을 사용하는 방법?](https://meta.discourse.org/t/how-to-use-the-rss-icon-from-font-awesome/277742)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [9월 5, 2023, 6:15오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/142 "2023-09-05T06:15:58Z")

</div>

2개의 게시글이 새로운 주제([Font Awesome pulse를 로딩 아이콘으로 사용하는 방법?](https://meta.discourse.org/t/how-to-use-font-awesome-pulse-as-the-loading-icon/277817))로 분리되었습니다.

---

<div class="post-metadata">

### Author: ![md-misko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/md-misko/32/126315_2.png) [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [5월 23, 2022, 2:21오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/143 "2022-05-23T14:21:26Z")

</div>

Font Awesome를 6버전으로 업그레이드할 계획이 있나요?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [5월 23, 2022, 8:06오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/144 "2022-05-23T20:06:32Z")

</div>

좋은 질문입니다. 현재 Font Awesome 6로 업그레이드할 계획은 없지만, 곧 검토해 보겠습니다.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [5월 24, 2022, 4:40오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/146 "2022-05-24T04:40:20Z")

</div>

font-awesome 5를 계속 사용하는 곳이 꽤 많았습니다. 6에서는 일부 아이콘이 누락되었기 때문이죠 (현재는 유료 플랜에서 제공됩니다).

업그레이드 자체에는 반대하지 않습니다. 다만 이 점을 염두에 두시면 좋겠습니다.

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [9월 3, 2023, 6:57오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/156 "2023-09-03T18:57:40Z")

</div>

> [@sam](#):
>
> font-awesome 6에서 일부 기능이 누락되어(현재는 유료 플랜에 포함됨) 여전히 font-awesome 5를 고수하는 경우를 꽤 많이 봤습니다.

그렇군요. [하위 호환성에 대해 꽤 강조하고 있는데](https://fontawesome.com/docs/web/setup/upgrade/whats-changed#backward-compatibility), 그 점은 좀 놀랍네요. 무엇이 누락되었는지 나열된 링크가 있으신가요?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [9월 3, 2023, 11:53오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/157 "2023-09-03T23:53:45Z")

</div>

링크는 없고, 미안하지만 지금은 일화만 공유할게요. @pmusaraj 님이 이 문제로 좀 고생했던 것 같아요.

---

<div class="post-metadata">

### Author: ![hellekin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hellekin/32/51636_2.png) [@hellekin](https://meta.discourse.org/u/hellekin)
#### Post date: [9월 4, 2023, 4:07오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/158 "2023-09-04T16:07:34Z")

</div>

[https://forkaweso.me/Fork-Awesome/를](https://forkaweso.me/Fork-Awesome/%EB%A5%BC) 고려해 보셨나요?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [9월 5, 2023, 5:51오전 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/159 "2023-09-05T05:51:09Z")

</div>

아직은 아니지만, 확실히 꽤 멋진 것 같습니다. 다만, Discourse를 되돌려서 해당 패턴에 맞게 이식하는 것은 상당한 고역이 될 것 같다는 느낌이 듭니다.

---

<div class="post-metadata">

### Author: ![hellekin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hellekin/32/51636_2.png) [@hellekin](https://meta.discourse.org/u/hellekin)
#### Post date: [9월 5, 2023, 2:04오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/160 "2023-09-05T14:04:49Z")

</div>

여기서 FontAwesome에서 ForkAwesome로 전환한 경험이 있는 분이 계신가요?

그들의 [새로운 기능 페이지](https://forkaweso.me/Fork-Awesome/whats-new/#new-upgrading)에서:

> 기존 아이콘의 유니코드 코드포인트를 변경하지 않도록 특별한 주의를 기울였으며, Font Awesome 4.7의 CSS 클래스 이름이나 아이콘 이름도 변경하지 않았습니다. 다만 몇 가지 아이콘을 추가하고 이 프로젝트에 기여하는 과정을 훨씬 쉽게 만들었습니다. 하지만 오류를 발견하시면 주저하지 말고 [버그를 신고](https://forkaweso.me/Fork-Awesome/community/#reporting-bugs)해 주세요.

[예제 페이지](https://forkaweso.me/Fork-Awesome/examples/)는 FontAwesome처럼 보입니다.

음, [유지보수자(아님)의 이 게시물](https://github.com/ForkAwesome/Fork-Awesome/blob/master/posts/2023-04-10_forkawesomeIntrospection/forkawesomeIntrospection.md)을 보면 현재 시점에서 그것을 사용하는 것이 나쁜 아이디어라고 말하는 것 같습니다. 아쉽네요.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [9월 5, 2023, 3:12오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/161 "2023-09-05T15:12:47Z")

</div>

FontAwesome는 6 버전에서 “Regular” 아이콘 세트를 전체적으로 유료 플랜으로 이동시켰습니다. 하지만 SVG 아이콘을 직접 사용하는 경우(즉, 웹 폰트로 사용하지 않는 경우) 기존 Regular 세트 아이콘은 여전히 무료로 사용 가능한 것으로 보입니다. 이는 우리에게 좋은 소식입니다. 우리는 fontawesome 저장소에서 SVG 스프라이트를 사용하고 있기 때문입니다.

다만, 그들이 추가한 하위 호환성 기능은 우리에게 그대로 적용되지 않습니다. 우리는 FontAwesome의 "SVG + JS 프레임워크"를 사용하지 않으므로 자동 별칭 지정의 이점을 받지 못합니다. 이는 5에서 6으로의 업그레이드를 막는 가장 큰 장애물일 수 있습니다(다만, 아이콘 누락만큼은 크지 않습니다).

---

<div class="post-metadata">

### Author: ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)
#### Post date: [10월 26, 2023, 5:00오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/163 "2023-10-26T17:00:15Z")

</div>

> [@pmusaraj](#):
>
> 기본적으로, SVG 스프라이트를 플러그인의 `plugins/svg-icons` 폴더에 추가하세요. 예시는 [https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg](https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg) 를 참조하세요. 다음으로 아이콘을 등록하면 준비가 완료됩니다.

이 링크가 저한테는 작동하지 않아요

---

<div class="post-metadata">

### Author: ![carbonrich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/carbonrich/32/274219_2.png) [@carbonrich](https://meta.discourse.org/u/carbonrich)
#### Post date: [10월 26, 2023, 5:33오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/165 "2023-10-26T17:33:24Z")

</div>

지난 1년 동안 Discourse 포럼의 사용성 테스트를 많이 해본 결과, Discourse가 사용성 향상을 위해 할 수 있는 최고의 일 중 하나는 아이콘 세트를 만드는 데 투자하는 것이라고 생각합니다. 명확성을 검증하고, 일관성을 높이며, 여기저기 작은 스타일을 보여주는 아이콘 세트 말입니다. 하지만 이 글이 그 주제에 대해 올리는 데 적합한 곳인지 모르겠네요!

---

<div class="post-metadata">

### Author: ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)
#### Post date: [10월 28, 2023, 6:29오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/166 "2023-10-28T18:29:34Z")

</div>

누군가 제 태그 아이콘 테마 컴포넌트에 플래그 이모지(깃발 이모지)를 SVG 아이콘으로 추가하는 방법에 대해 좀 더 구체적으로 조언해 주실 수 있을까요? 테마 컴포넌트를 수정해야 하는지, 아니면 테마 컴포넌트 내에서 이 이모지들에 접근할 수 있도록 전용 플러그인을 작성해야 하는지 어떤 것이 필요한지 잘 이해하지 못하겠습니다.

감사합니다!

---

<div class="post-metadata">

### Author: ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)
#### Post date: [12월 1, 2023, 4:33오후 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/167 "2023-12-01T16:33:42Z")

</div>

> [@pmusaraj](#):
>
> [https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg](https://raw.githubusercontent.com/discourse/discourse/master/vendor/assets/svg-icons/discourse-additional.svg) 를 확인해 보세요.

음, 아무것도 안 보이네요.

> [@pmusaraj](#):
>
> 아이콘을 등록해야 합니다.

이걸 어떻게 해야 하나요?

- `SVG_Assets`이라는 이름의 사용자 정의 테마 컴포넌트를 생성했습니다.
- 사용자 정의 1x1 svg 아이콘을 업로드했습니다.
- 제 테마의 일부로 `SVG_Assets`를 활성화했습니다.
- Tag icons 테마 컴포넌트를 설치하고 제 테마에 추가했습니다.

`SVG_Assets`에 업로드한 각 svg 아이콘의 URL은 볼 수 있습니다.

> [@pmusaraj](#):
>
> svg 스프라이트를 다시 업로드하고 변수 이름으로 `icons-sprite`를 사용해야 합니다:

음, 알겠습니다. 에디터에서 설정이 어떻게 보여야 하는지에 대한 새로운 예시를 받을 수 있을까요?

## `us.svg` 업로드 추가 예시

현재 보이는 내용:

```plaintext
[
	{
		"setting": "tag_icon_list",
		"value": "tag1,question-circle,#CC0000|:de:,$de,https://domain/1X/604c368499a58499e21ab5337a325600cb35b421.svg"
	},
	{
		"setting": "svg_icons",
		"value": ""
	}
]

```

[이전 페이지](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643.md?page=6)
