Wie kann ich Verläufe auf dünne Icons anwenden?

[danielabc (Daniela)]

Ich habe alles versucht, ich kann keinen Farbverlauf auf Icons wie diesen anwenden

[danielabc (Daniela)]

Ich habe alles versucht und kann es nicht ändern

[danielabc (Daniela)]

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

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

}

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

1. color: red;

}

[Arkshine]

Hallo,

Wie ich auf Gradients in SVG - SVG | MDN gelesen habe, müssen Sie \u003clinearGradient\u003e zu SVG hinzufügen.

Weitere Ressourcen:

• Gradient fills for SVG icons
• SVG Gradients

Sie können ein verstecktes SVG in Ihrem Theme/Komponente erstellen, um Ihre Farbverläufe zu definieren:

<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>

  <!-- Define specific gradient as needed with a unique ID -->
</svg>

Dann definieren Sie in Ihrem CSS die Farbe und zielen auf die SVG-Elemente ab, die Sie mit fill füllen möchten:

/* defines gradients color */
#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 {
    /* targets all svg icons */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* targets only chat icon */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Hinweis: Der zweite Wert von fill ist eine Fallback-Farbe.

Ich habe nicht ausgiebig getestet, dies ist ein Beispiel, wie Sie anpassen können.
Schauen Sie sich gerne die Dokumentation an, um komplexere Farbverläufe zu erstellen.

Ich hoffe, das hilft!

[danielabc (Daniela)]

Hallo, ist alles in Ordnung? Vielen Dank, dass Sie mir geantwortet haben.
Ich hatte diese Methode schon einmal ausprobiert, aber ich konnte sie nicht richtig verstehen (zumal ich kein Englisch verstehe), aber sie funktionierte nicht. Ich habe es so versucht, wie Sie es mir gezeigt haben, und dieses Mal ändern sich die Symbole, aber sie ändern sich nicht in die Gradientenfarbe, sondern nur in eine graue Farbe. Lassen Sie mich diese Zweifel klären, um zu sehen, ob es sich nicht um einen Fehler handelt: Wie heißt die Textdatei, die Sie gespeichert haben? Und wie haben Sie sie beim Hochladen des Themas genannt? Wo haben Sie das CSS eingefügt, im Desktop-CSS-Teil?

[Arkshine]

Ich habe mein Theme-CSS/HTML über Anpassen → Themes im Admin-Panel bearbeitet.

1. Bearbeiten Sie entweder Ihr Theme oder erstellen Sie hier eine Theme-Komponente, indem Sie Beginner's guide to using Discourse Themes folgen.

2. Klicken Sie auf CSS/HTML bearbeiten

3. Im Reiter Body fügen Sie den SVG-Code ein.
   Im Reiter Common fügen Sie das CSS ein.

[danielabc (Daniela)]

Ich hatte so viele Probleme damit, und das Problem lag darin, wie ich es angebracht habe, lol, vielen Dank, dass Sie mir beigebracht haben, wie ich es an der richtigen Stelle anbringe. Ich werde Ihnen für Ihre Hilfe immer dankbar sein, vielen Dank.