Change the Like Icon to 👍

[Discourse]

	Summary	Change the Like Icon to allows you to change the icon to the icon – or any other font awesome 5.5 glyph you prefer.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/new-like-icon
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Since we switched to Font Awesome 5, we built an internal API that delivers a subset of all FA icons to clients – only those icons actively used by Discourse. Site owners can use the svg icon subset site setting to register additional icons for their Discourse instance.

Before

After

If desired,

• you can change the color of the like icon via /admin/customize/colors/ (look for the love color setting)
• you can change the text from “like” to a different term via /admin/customize/site_texts/

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T12:34:28Z

Check document

Perform check on document:

[Phlipups]

안녕하세요,
이 주제를 다시 꺼내서 죄송합니다. 하지만 정말 혼란스럽습니다. 다른 디스코urse 포럼에서 엄지손가락 위 아이콘을 사용하는 것을 보고 찾아보게 되었습니다.
제가 하고 싶은 것은 엄지손가락 위 아이콘 대신, 여기 - Pig Filled Icon (Classic Solid) — SVG Download | Font Awesome 의 돼지 아이콘을 사용하고, 아웃라인 버전은 ‘싫어요’ 아이콘으로 사용하는 것입니다. 이것이 가능한가요? Pro 아이콘이므로, 다운로드를 해야 하는지, 아니면 직접 만들어 커스텀 아이콘이나 이모지로 추가한 후 ‘좋아요’ 아이콘 컴포넌트에 적용해야 하는지 궁금합니다. 그것도 어떻게 해야 할지 모르겠습니다.
‘Change Like Icon’ 컴포넌트를 설치하고 사용되지 않는 테마에서 테스트해 보았는데, 의도대로 작동합니다. 문제는 해당 컴포넌트의 설정에서 CSS를 수정할 수 있는 영역이 보이지 않아, 이 스레드 초반에 언급된 스크립트를 추가할 곳이 없다는 것입니다.
도움 주시면 감사하겠습니다.

[Tris20 (Tristan)]

@Phlipups처럼 저도 아이콘을 그냥 단색 맥주 아이콘으로만 바꾸려는데, 빈 화면만 표시됩니다.

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'beer');
      api.replaceIcon('d-unliked', 'fa-beer');
      api.replaceIcon('notification.liked', 'fa-beer');
      api.replaceIcon('notification.liked_2', 'fa-beer');
      api.replaceIcon('notification.liked_many', 'fa-beer');
      api.replaceIcon('notification.liked_consolidated', 'fa-beer');      
      api.replaceIcon('heart', 'beer');
</script>

[Don]

Tris님, 안녕하세요.

admin/site_settings/category/all_results?filter=svg%20icon%20subset의 svg icon subset 사이트 설정에 beer를 추가해 보세요.
그리고 fa-beer 대신 beer만 사용하는 것으로 충분할 것 같습니다. 무료 버전에는 beer 아이콘의 테두리 버전이 하나뿐이므로, 클릭 후 색상이 변하는 것만 있을 것입니다.

[Tris20 (Tristan)]

정말 훌륭해요, Don! 도움 주셔서 감사합니다!

[mangojumbo (Luca)]

안녕하세요, 이 컴포넌트를 설치했는데, 잘 동작하며 게시물 목록의 하트 아이콘도 성공적으로 대체되었습니다. 하지만 사용자가 받는 이메일 알림에는 여전히 이전 하트 아이콘이 표시되고 있습니다.
무엇을 놓치고 있는 걸까요? 이메일 템플릿도 수정해야 하나요?
이 멋진 컴포넌트를 개발해 주셔서 감사합니다.

[nathank (Nathan Kershaw)]

저장소를 좀 더 명확하게 만들기 위해 PR을 올렸습니다 (내 인스턴스에서 TC를 식별할 수 없어서):

Update description, link to meta topic, and title (#12)

저장소 링크를 new-like-icon에서 더 명확한 이름으로 변경해야 할지 궁금합니다. 물론 그렇게 하면 혼란이 생길 테니, 아마 안 되는 게 좋겠죠!