아이콘을 Font Awesome 6로 업그레이드합니다!

[awesomerobot (Kris)]

Font Awesome란?

Discourse는 인터페이스 전반에 걸쳐 Font Awesome의 무료 아이콘 세트를 사용합니다. 툴바, 배지, 버튼 등에서 이러한 아이콘을 볼 수 있으며, 다음은 우리들의 작성기(Composer) 툴바입니다:

2018년부터 Font Awesome 5(원래 발표)를 사용해 왔으며, 그 사이 Font Awesome 6가 출시되었습니다. 6버전에는 새로운 아이콘, 일반적인 스타일 업데이트 및 이름 변경이 포함되어 있습니다.

오늘부터 Discourse도 6버전을 사용하기 시작합니다. 구체적으로는 6.6.0 버전입니다. 이는 거대한 시각적 변화는 아니지만, 몇 가지 차이를 발견하게 될 것입니다:

이 업그레이드는 무엇을 포함합니까?

이 업그레이드는 일관성을 높이기 위한 여러 이름 변경을 포함합니다.

Discourse 커뮤니티가 업그레이드를 원활하게 수행할 수 있도록, 변경 사항은 여러 단계로 적용됩니다:

---

오늘 - Font Awesome이 v6로 업그레이드되며, 아이콘이 자동으로 재매핑됩니다.

곧 - 테마/플러그인 개발자가 아이콘 이름을 업데이트할 수 있도록 비권장(deprecation) 메시지가 활성화됩니다.

2025년 1분기 - 남아있는 비권장 항목에 대해 관리자 경고 배너가 활성화됩니다.

2025년 4월 1일 - 자동 재매핑 및 관리자 경고 배너가 제거됩니다.

2025년 5월 2일 - 구형 아이콘 이름 매핑 및 에러 레벨 로깅이 제거됩니다.

---

아이콘이 누락된 것을 보고 있습니다. 어떻게 수정할 수 있을까요?

1. 브라우저 개발자 도구를 열고, 아이콘이 누락된 관련 요소를 찾으세요.

2. 영향받은 아이콘의 현재 이름을 확인하고, 업데이트할 올바른 아이콘 이름을 찾아보세요. 아이콘 이름 매핑은 discourse/lib/deprecated_icon_handler.rb at fbc2cfb6185c00950da8e915b1a32546e7020913 · discourse/discourse · GitHub 참조할 수 있습니다.

3. 해당 요소가 속한 관련 테마/플러그인을 업데이트하거나, 개발자에게 업데이트를 요청하세요.

이 부분에 도움이 필요하시다면, Support 토픽을 생성하시거나 일반적인 방식으로 호스팅 제공업체에 문의해 주세요.

테마 및 플러그인 개발자가 알아야 할 사항은?

https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643에서 다룬 방법들은 여전히 새 아이콘 및 사용자 정의 아이콘을 추가하는 데 사용할 수 있습니다.

우리는 이미 구형 이름의 재매핑을 제거했으며, 테마/플러그인에서 여전히 구형 이름을 사용하고 있다면, 이전에 아이콘이 있던 곳에 빈 공간이 표시될 것입니다.

새로운 아이콘이 많이 있습니다!

5버전에서 6버전으로의 업그레이드는 수백 개의 새로운 무료 사용 가능 아이콘, 총 약 500개를 도입합니다.

여기서 전체 세트를 둘러볼 수 있으며, 최신 추가 항목이 먼저 정렬되어 있고 검색 기능도 매우 유용합니다: Search Icons & Find the Perfect Design | Font Awesome

[Jagster (Jakke Flemming)]

이것이 여전히 필요한가요?

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

그리고 이 부분은 수정해야 하나요?

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

[ondrej]

정말 좋아요! 드디어 원하는 아이콘을 카테고리에 사용할 수 있겠네요

[awesomerobot (Kris)]

@Jagster

이것이 더 이상 필요한가요:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

이것은 Making tags look like real world tags - #11 by HeyRR… 와 관련이 있을 수 있습니다. content: "\f02b"; 같은 CSS를 사용 중이라면, 네, 여전히 이것이 필요합니다. 이는 우리의 구현 방식(직접 SVG 파일을 사용하는 방식)과 별개로 아이콘 폰트를 사용하는 것입니다.

@Jagster

그리고 이 부분은 수정해야 하나요:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

이것은 즉시 수정할 필요가 없지만, 이름 변경 목록에 따르면, 향후 6개월 내 share-alt를 share-nodes로, beer를 beer-mug-empty로 교체해야 합니다. (채워진 맥주 잔 아이콘은 프로 아이콘이므로… 아마도 "맥주처럼 무료"가 아닌 것 같습니다.)

[Jagster (Jakke Flemming)]

@awesomerobot

Making tags look like real world tags - #11 by HeyRR과 관련이 있을 수도 있습니다…

그럴지도 모릅니다. 몇 년 전에도 여러 번 조언을 주셨던 부분이었습니다. 왜 그런지 정확히 이해하진 못했지만, 복사해서 붙여넣기는 할 수 있죠 하지만 어딘가에 Font Awesome을 사용할 수 있는 능력과 관련이 있는 것 같습니다.

하지만 더 이상 맥주를 사용할 수 없다면 무민 군단과 함께 반란을 일으킬 겁니다

[Moin]

현재 메타에서는 방패 아이콘이 표시되지 않습니다.

[Moin]

수정 완료

[patrickemin]

감사합니다. 버전 6로 업그레이드가 이미 완료되었는지, 아니면 앞으로 진행될 것인지가 명확하지 않아서요. (사이트를 업그레이드한 후 “bluesky” 버전 6 아이콘을 찾을 수 없어 질문드리는 겁니다…)

[ondrej]

사이트를 업데이트하면 아이콘이 FA6로 변경되고 Discourse에서 자동으로 재매핑됩니다.

[patrickemin]

네, 예상했던 내용과 일치하지만 이 아이콘이 표시되지 않아요 (헤더 아이콘 링크 컴포넌트에서 사용하고 있어요).

[ondrej]

6.6.0에서 아이콘을 찾았습니다.

Font Awesome

Discourse에서 사용되는 아이콘이 아니므로, 사이트 설정의 svg icon subset에 포함되어 있나요?

[patrickemin]

아니요, 컴포넌트의 리소스에 "fa-bluesky"라는 문법으로 추가하고 있지만, 그것만으로는 충분하지 않습니다. svg 리소스 관련 부분은 잘 모르겠으니 살펴보겠습니다.

(업데이트) 결국 우리가 이야기하고 있는 것이 같은 것인 것 같습니다. 네, 리소스에 추가되어 있습니다…

[awesomerobot (Kris)]

브랜드 세트의 일부이므로 fab-bluesky를 실행해야 할 수 있습니다.

[patrickemin]

감사합니다. svg 리소스와 커스텀 헤더 링크 편집기에서 fab-bluesky를 지정하면 작동합니다. 이전에는 이런 설정을 할 필요가 없었는데요. 커스텀 헤더 링크 컴포넌트에서는 이전에도 접두사 "fa"를 지정하지 않았는데, 블루스카이 아이콘의 경우 "fab-bluesky"를 지정해야 했습니다. 어쨌든 작동하니 다행입니다. 감사합니다.

[Jagster (Jakke Flemming)]

@Jagster

하지만 더 이상 맥주를 마실 수 없다면 무민 군단으로 반란을 일으킬 거예요

업그레이드를 진행했고 아이콘이 바뀌었습니다. 저를 가장 불안하게 만든 부분은, 제 사용자분들(그분들은 정말 훌륭하시지만, 화를 내시면…)이 어떻게 반응할지였는데, 반응(리액션) 기능은 별개의 영역이죠? 어쨌든 모든 것이 순조롭게 진행되었습니다.

[darkpixlz (Pyx)]

멋진 업그레이드네요! 업데이트된 반올림 기능이 마음에 들어요. 제가 원하던 변경사항이었는지 몰랐어요.

[mattdm (Matthew Miller)]

가장 중요한 점은, 새로운 버전이 우리 디자이너들을 두통으로 몰아넣었던 무단 근사 대신 올바른 Fedora 로고를 사용한다는 것입니다.

[traceymoko (Tracey)]

공식 카테고리 아이콘 및 태그 아이콘 테마 컴포넌트가 새로운 Font Awesome 6 이름을 사용하도록 업데이트될 예정인가요?

Category Icons

This theme component is deprecated and should no longer be used. Its features are now in Discourse Core (see: Bringing popular features to Discourse). For private category icon customization, refer to this topic. Summary Category Icons allows category badge links to have icons next to the category name. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-category-icons …

Tag Icons

Summary Tag Icons allows tags to have an icon next to the tag label. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-tag-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Here is an example of how this would look, with tag style set to the default (simple): [image] Here is how this looks with tag sty…

아직 FA5를 사용하고 있는 것으로 보입니다.

[awesomerobot (Kris)]

이 테마 컴포넌트는 Discourse에 내장된 아이콘 시스템을 사용하므로, 호환성을 위해 업데이트가 필요하지 않을 것으로 생각됩니다. 새로운 아이콘을 자동으로 사용하게 될 것입니다.