알림 아이콘을 변경할 수 없습니다

개발
1

여러분 안녕하세요
이 아이콘들을 변경하고 싶습니다

image
image388×543 32.1 KB

아래와 같이 진행했습니다

image
image1371×377 67 KB

그리고 헤더에 이렇게 작성했습니다

image
image675×130 7.69 KB

하지만 아이콘이 변경되지 않았습니다
다른 아이콘들은 정상적으로 작동합니다
이 문제를 해결하는 데 도움을 주세요

2

미하일, 안녕하세요!

이것을 시도해 보세요 :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>

이 대체 설정은 여기서 찾을 수 있습니다 :arrow_down:

3

네, 잘 작동했습니다. 정말 감사합니다

image
image481×429 26.2 KB

4

그런데 그 모양을 어디서 볼 수 있을까요?

5

요소 검사(inspect elements)를 사용하면 쉽게 식별할 수 있습니다.

예를 들어, 인증서 아이콘 알림을 찾는 경우:

  1. 요소 검사를 사용하여 아이콘 이름을 찾습니다

Screenshot 2021-08-11 at 16.43.04
Screenshot 2021-08-11 at 16.43.041276×746 253 KB

  1. 아이콘 라이브러리 js에서 동일한 아이콘을 찾습니다

이제 원하는 다른 아이콘으로 아이콘을 교체할 수 있습니다. :slightly_smiling_face:

6

답변 감사합니다.
해결했습니다. 표준 Discourse 아이콘 목록이 있는 줄 알았거든요.

7

향후 참고용으로 이 내용을 추가해도 될까요? Replace Discourse's default SVG icons with custom icons in a theme - #19 의 지시에 따라 진행했지만, 처음에는 같은 아이콘이 서로 다른 방식으로 참조될 수 있다는 점을 인지하지 못했습니다. 앱 자체의 ‘/styleguide/atoms/icons’ 경로에는 모든 아이콘 목록과 참조 방식이 나열되어 있으며, 현재 제 header.html 파일에는 봉투 아이콘에 대한 5개의 참조가 있습니다:

    api.replaceIcon('envelope', 'fgx-air-mail');
    api.replaceIcon('far-envelope', 'fgx-air-mail');
    api.replaceIcon('notification.private_message', 'fgx-air-mail');
    api.replaceIcon('notification.read_private_message', 'fgx-air-mail');
    api.replaceIcon('notification.invited_to_private_message', 'fgx-air-mail');