はい、申し訳ありません。投稿を更新すべきでした。Font Awesome については、Setup に追加する必要があることが分かりました。
また、ご指摘の通り、アイコンスプライトをアップロードするために SVG スプライトファイルを作成する必要があることも最近学びました。
まだ多くの新しいことを学んでいる最中です。知識を深めるお手伝いをいただき、感謝しています。ありがとうございます。
「いいね！」 2
当サイトのカテゴリアイコンはこれまで見栄えが良かったのですが、今日ログインしたところ、アイコンとカテゴリタイトルの間のパディングが表示時に設定されていないようです。他にも同様の問題に直面している方はいますか？
例…
「いいね！」 3
私にも同じように見えます。Penar さんが修正してくれると思いますが、当面はこの方法で対応できます。
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
「いいね！」 3
ありがとうございます。これで修正されたはずです。
「いいね！」 8
Font Awesome 以外のアイコンを使用することは可能ですか？当フォーラムは旅行に関するものであり、Font Awesome には存在しない非常に具体的なアイコンが必要です。カテゴリでやっているように、通常の PNG イコンファイルを使用することはできますか？よろしくお願いします！
「いいね！」 3
SVGスプライトとして変換し、テーマに追加することで、カスタムアイコンを使用できます。カスタムアイコンをサイトに追加する方法については、このガイドの「SVGスプライトシートを作成する」セクションを参照してください。これにより、このコンポーネント（およびDiscourseサイト全体）でカスタムアイコンを使用できるようになります。
「いいね！」 7
素晴らしいです！
カテゴリタイトルの後にアイコンを表示するように調整することは可能でしょうか？
追加質問：ツールチップやaltテキストを追加することは可能でしょうか？
（背景：鍵のアイコンを非表示にし、代わりにこのコンポーネントを使用して、少数の公開カテゴリにアイコンを追加しています。ユーザーがそのシンボルが何を表しているかを確認できる方法があればと思います。）
「いいね！」 1
カスタムアイコンの使用に困っています。プレフィックスが必要かどうかを判断できる情報が何も得られませんでした。私が行っている作業は以下の通りです。
使用している SVG はこちらです - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
ご覧の通り、Arch のアイコンが全く表示されていません。
「いいね！」 1
- SVG スプライトシートの作成: Replace Discourse's default SVG icons with custom icons in a theme
- テーマコンポーネントでスプライトシートをアップロードし、変数名を
icons-spriteに設定します:
- コンポーネント設定で、スプレッドシートから希望するアイコンの ID を使用します。例えば、スプレッドシートに
my-iconという名前のアイコン ID がある場合、以下のように記述します:
結果:
「いいね！」 6
@Canapin それでは動きません。私のスプライトファイルはこちらです - スプライトファイル
私が試している画像 ID はこちらです - こちら
私が行っている操作は以下の通りです -
何か間違っていますか？
「いいね！」 1
スプライトシートでは、以下を置き換えてみてください：
<svg width="0" height="0" class="hidden">
以下に置き換えます：
<svg xmlns="http://www.w3.org/2000/svg">
また、svg icons設定フィールドにアイコンIDを追加する必要はありません。アップロードしたスプライトシートから、すべてのカスタムアイコンが既に利用可能です。
svg icons設定は、Discourseがデフォルトで読み込む定義済みかつ少量のセットに加えて、追加のFont Awesomeアイコンを読み込むために使用されるものだと考えられます。
「いいね！」 5
@Canapin ありがとうございます！完璧に動作しました。もう一つ質問があるのですが、このスプライトファイルは特定のコンポーネントに限定されているのでしょうか、それとも ID を通じてどこからでもアイコンにアクセスできるのでしょうか？
「いいね！」 2
テーマまたはテーマコンポーネントにファイルをアップロードすると、他の場所でも使用できるため、アイコン ID はどこでも使用できると思われます。
「いいね！」 1
ペナルさん、こんにちは。これは新しい Font Awesome Pro プラグインに対応していますか？それとも、何か見落としている使い方があるのでしょうか？よろしくお願いします！
「いいね！」 1
Proプラグインでも動作するはずです。カテゴリアイコンにのみ非ProのSVGが表示されていますか？
「いいね！」 2
はい、スプライトを削除した後、非プロ版のみが表示されます。また、非プロ版は fa_icon_style 設定（ライトアイコンなど）に従いません。
ふむ、私のローカルサイトでは問題なく動作しています。
これは「Light」スタイルを選択したプラグインを使用している際のギアアイコンです。以下に示す通常のスタイルと比較してください。
もしかすると、確認すべき箇所が異なるかもしれません…もし特定のアイコンが正しく表示されていない場合は、お知らせください。
「いいね！」 4
以下は、設定を「light」にした場合の例です。Image Critiques のアイコンは comment-alt-edit で表示されていません（これはプロアイコンです）。Image Showcase のアイコンは images で、プロではありませんが、表示されているのは通常のバージョンで、light 版ではありません。Discussions は comments のソリッド版を表示し、Community は期待通り users の light 版を表示しています。
一つを cog に変更してみましたが、期待通りに正しく light 版が表示されました。ここには奇妙な現象が多数発生しています！
「いいね！」 2
far-comment-alt-edit で試しましたか？
「いいね！」 3
なるほど、わかったよ。ポイントは「svg icons」ではなく「category icon list」に far- を含めることだね。だから、ライトアイコンの場合はすべて fal- に変更する必要がある。でも、これはサイトの設定にある「fa icon style」に従わないってこと、合ってる？
「いいね！」 2