細いアイコンにグラデーションを適用するにはどうすればよいですか？

開発
1

すべて試しましたが、ここに表示されているようなアイコンにグラデーションを適用できません。

image
image1920×1080 174 KB

2

色々試しましたが、変更できませんでした:frowning:

3 
.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {

1. background-image: linear-gradient(to right, #4c6c81, #083263);

}

image
image526×116 4.8 KB

.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {

1. color: red;

}

image
image506×142 2.18 KB

4

こんにちは。

Gradients in SVG - SVG | MDN で読んだ内容によると、SVG に <linearGradient> を追加する必要があるとのことです。

その他のリソース：

できることとしては、グラデーションを定義するために、非表示の SVG を テーマ/コンポーネント に作成することです。

<svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;">
  <linearGradient id="my-gradient-1" x2="0" y2="1">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
  </linearGradient>

  <linearGradient id="my-gradient-2">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
    <stop offset="100%" stop-color="var(--color-stop-3)" />
  </linearGradient>

  <!-- 必要に応じて、一意のIDを持つ特定のグラデーションを定義します -->
</svg>

次に、CSS で色を定義し、fill したい SVG 要素を指定します。

/* グラデーションの色を定義します */
#my-gradient-1 {
    --color-stop-1: #a770ef;
    --color-stop-2: #eda58b;
}

#my-gradient-2 {
    --color-stop-1: #2980b9;
    --color-stop-2: #6dd5fa;
    --color-stop-3: #ffffff;
}

.svg-icon, .svg-icon-title {
    /* すべてのSVGアイコンを対象とします */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);

    /* チャットアイコンのみを対象とします */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

注：fill の 2 番目の値はフォールバックカラーです。

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

広範なテストは行っていませんが、カスタマイズ方法の例として参考にしてください。
より複雑なグラデーションについては、ドキュメントをご確認ください。

お役に立てれば幸いです！

「いいね！」 2
5

こんにちは、すべて順調ですか？お返事ありがとうございます。

以前この方法を試したことがありますが、（英語が理解できなかったこともあり）きちんと理解できず、うまくいきませんでした。あなたが教えてくれた方法を試したところ、今回はアイコンが変更されましたが、グラデーションカラーではなく、単に灰色に変わっただけでした。さて、これらの疑問を解消させてください。これはエラーではないでしょうか？保存したテキストファイルの名前は何ですか？そして、テーマをアップロードしたときに付けた名前は何ですか？CSSは、デスクトップのCSS部分に配置しましたか？

image
image967×677 14.5 KB

6

管理パネルの「カスタマイズ」->「テーマ」からテーマのCSS/HTMLを編集しました。

  1. テーマを編集するか、Beginner's guide to using Discourse Themes に従って、ここでテーマコンポーネントを作成します。

  2. 「CSS/HTMLの編集」をクリックします。

  3. 「本文」タブにSVGコードを貼り付けます。
    「共通」タブにCSSを貼り付けます。

image
image537×376 16.4 KB

image
image474×414 13.1 KB

「いいね！」 1
7

これでとても苦労しましたが、問題は入れ方でした（笑）。正しい場所に入れる方法を教えてくれて本当にありがとう。あなたの助けには永遠に感謝します。本当にありがとう。

「いいね！」 1