Discourse のアイコンをグローバルに変更する簡単な方法です。
-
変更したいアイコンを右クリックし、「要素を検証」または「検証」(ブラウザによって異なります) を選択します。
-
アイコン名を探します
-
新しいアイコンをここで検索します https://fontawesome.com/icons?d=gallery。例: external-link-alt
-
カスタマイズし、
admin > customize > themes > edit code -> JSタブにコードを追加します
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("link", "external-link-tab");
});
- Discourse のデフォルトでは使用されていないアイコンは、サイト設定の
svg icon subsetに追加し、ブラウザを強制的に更新して変更を適用する必要があります。
結果:
すべての「link」アイコンが「external-link-tab」に置き換えられます。
バッジなど、他のページでアイコンが複数回使用されている場合、そのアイコンも置き換えられます。
例外
「いいね」アイコンを変更できるテーマコンポーネントがすでに存在することに注意してください (こちら)。ここではこのケースを例として使用します
「いいね」を付けるために使用される「heart」アイコンは、他の名前 ('d-liked' および 'd-unliked') でハードコーディングされており、他のアイコンとは異なる扱いをする必要があります。そのため、:heart: アイコンを :+1: アイコンに変更するには:
api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");
しかし、バッジページではアイコンはまだ「heart」です:
そのため、このページで変更するには、次を追加します:
api.replaceIcon("heart", "thumbs-up");
別の例:
api.replaceIcon("d-watching", "eye");
これにより、watching アイコンが変更されます:
トラッキングステータス、展開/折りたたみ、通知、そしてもちろん「いいね」をカバーする他の例外をここで確認してください。
const REPLACEMENTS = {
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
"d-liked": "heart",
"d-post-share": "link",
"d-topic-share": "link",
"notification.mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",
"notification.edited": "pencil-alt",
"notification.bookmark_reminder": "discourse-bookmark-clock",
"notification.liked": "heart",
"notification.liked_2": "heart",
"notification.liked_many": "heart",
"notification.liked_consolidated": "heart",
"notification.private_message": "far-envelope",
"notification.invited_to_private_message": "far-envelope",
"notification.invited_to_topic": "hand-point-right",
"notification.invitee_accepted": "user",
"notification.moved_post": "sign-out-alt",
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",
"notification.membership_request_consolidated": "users",
"notification.reaction": "bell",
"notification.votes_released": "plus",
"notification.chat_quoted": "quote-right",
};
参照: discourse/icon-library.js at main · discourse/discourse (github.com)
他のテーマコンポーネントを作成して、Theme component カテゴリで共有することを歓迎します!
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
, meanwhile I’ve tried several other icons, e.g. 