テキストからアイコンへ

[Radu]

CSSのみを使用して、スクリーンショットのテキストを別のSVGアイコン（任意）に置き換えるにはどうすればよいですか？

よろしくお願いします！

[NateDhaliwal]

まず、アップロードセクションにSVGファイルをアップロードする必要があります。SCSSの変数名には、短く簡潔なものを付けましょう。
次に、共通タブに以下のコードを追加します。

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

urlの括弧の中に引用符を入れないように注意してください。

[Canapin (Coin-coin le Canapin)]

DonはCSSでアイコンを使用するためのヘルパーツールを作成しました。

Discourse Easy 'SVG Icon' and 'Emoji' in CSS

Hello This topic contain two theme component. Discourse Easy SVG Icon CSS This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…

[Radu]

すみません、よく分かりません。$name-of-variable とはどういう意味ですか？ content: の後にSVGコードを追加しようとしていますが、うまくいきません。

[Radu]

@Canapin様、大変感謝しておりますが、SVGコードで「replies」という単語を変更するために、さらにコンポーネントをインストールすることは考えておりません。

[NateDhaliwal]

SVG ファイルをアップロードしたときに指定した名前が変数名になります。

これを行うには管理者権限が必要です。

---

1. フォーラムで /admin に移動します。
2. サイドバーの「カスタマイズ」セクションで「コンポーネント」を選択し、新規作成します。
3. コンポーネントページの最下部にある「アップロード」の下に SVG ファイルをアップロードします。
4. 変数名を指定します（アップロードファイルモーダル内）。
5. 私の投稿にあるコードを使用します。

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

6. name-of-variable をステップ 4 で選択した名前に置き換えます。変数名の前の $ はそのままにしてください。
7. これで完了です！

[Radu]

どうもありがとうございます。とてもよくわかりました。

簡単な質問ですが、アイコンが10個ある場合、アイコンを1つずつアップロードする必要がありますか？

[NateDhaliwal]

はい、そう思います。

[NateDhaliwal]

@Radu 私のガイドがうまくいかない場合は、こちらのガイドに従ってください。複数のアイコンに対してファイルを1つアップロードするだけで済むはずです。

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Radu]

これは素晴らしい投稿で、デフォルトのアイコンを置き換えるのに役立ちました。もう一つ、もしよろしければ…

以下で、content の中に FontAwsome アイコンを配置するにはどうすればよいですか？

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content:'ここに FontAwesome アイコン';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

SVGとしてダウンロードして、同じことをすればよい。それ以外の場合は、より複雑なコンポーネントを作成する必要がある。

[Radu]

このような方法で何かを行う方法はありますか？

content:'fa d-icon d-icon-reply';

もしなければ、以下のメソッドのコードはどのようになりますか？基本的なCSSを試しましたが効果がなかったので、開始点となる例が必要です。

@NateDhaliwal

SVGとしてダウンロードしてから同じことを行うことができます。

よろしくお願いいたします！

[NateDhaliwal]

@Radu

content:'fa d-icon d-icon-reply';

いいえ、以前の方法で行ったのと同じ方法で実行できます。アップロードしてから、ガイドに従ってSVGファイルとして追加してください。

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[NateDhaliwal]

@Radu

もしそうでないなら、以下のメソッドのコードはどのようになりますか？基本的なCSSを試しましたが効果がなかったので、開始点となる例が必要です。

アイコンをどこに配置したいのかよくわかりません。スクリーンショットを送っていただけますか？
ありがとうございます。

[Radu]

どこでも構いません。content:'...' の行の中に FA アイコンを配置したいだけです。

FA をフォントファミリーとして、content メソッド内に Unicode を使用するつもりです。

[NateDhaliwal]

このようにすることもできます。

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

これが機能するかどうか100%確信はありませんが、機能するとかなり確信しています。