Come metto una sfumatura su icone sottili?

[danielabc (Daniela)]

Ho provato di tutto, non riesco a mettere un gradiente su icone come queste qui

[danielabc (Daniela)]

Ho provato di tutto e non riesco a cambiare

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

Ciao,

Da quello che ho letto su Gradients in SVG - SVG | MDN, devi aggiungere <linearGradient> all’SVG.

Altre risorse:

• Gradient fills for SVG icons
• SVG Gradients

Quello che puoi fare è creare un SVG nascosto nel tuo tema/componente per definire le tue sfumature:

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

  <!-- Definisci la sfumatura specifica secondo necessità con un ID univoco -->
</svg>

Quindi, nel tuo CSS, definisci il colore e selezioni quali elementi SVG vuoi riempire (fill):

/* definisce il colore delle sfumature */
#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 {
    /* seleziona tutte le icone svg */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);

    /* seleziona solo l'icona della chat */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Nota: il secondo valore di fill è un colore di fallback.

Non ho testato approfonditamente; questo è un esempio di come puoi personalizzare.
Sentiti libero di consultare la documentazione per creare sfumature più complesse.

Spero che questo aiuti!

[danielabc (Daniela)]

Ciao, tutto bene? grazie mille per avermi risposto
quindi avevo già provato questo metodo una volta, ma non ero riuscito a capirlo bene (tanto più che non capisco l’inglese) ma non aveva funzionato, ho provato nel modo che mi hai mostrato e questa volta le icone cambiano, ma non cambiano per il colore sfumato, cambiano solo in un colore grigio, beh, lasciami chiarire questi dubbi per vedere se non è un errore, qual è il nome del file di testo che hai salvato? e che nome hai messo quando hai caricato il tema? dove hai messo il css, nella parte desktop del css?

[Arkshine]

Ho modificato il CSS/HTML del mio tema tramite Personalizza → Temi dal pannello di amministrazione.

1. Modifica il tuo tema o crea un componente del tema qui seguendo Beginner's guide to using Discourse Themes.

2. Fai clic su Modifica CSS/HTML

3. Nella scheda Body, inserisci il codice SVG
   Nella scheda Common, inserisci il CSS

[danielabc (Daniela)]

Ho avuto così tanti problemi con questo, e il problema era nel modo in cui lo stavo mettendo lol, grazie mille per avermi insegnato come metterlo nel posto giusto, sarò sempre grato per il tuo aiuto, grazie mille