¿Cómo pongo degradado en iconos finos?

[danielabc (Daniela)]

Lo intenté todo, no puedo poner degradado en iconos como estos aquí

[danielabc (Daniela)]

No he podido cambiar nada

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

Hola,

Según lo que leí en Gradients in SVG - SVG | MDN, debes agregar <linearGradient> al SVG.

Otros recursos:

• Gradient fills for SVG icons
• SVG Gradients

Lo que puedes hacer es crear un SVG oculto en tu tema/componente para definir tus gradientes:

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

Luego, en tu CSS, defines el color y apuntas a qué elementos SVG quieres aplicar fill:

/* 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);
    }
}

Nota: el segundo valor de fill es un color de reserva.

No he probado exhaustivamente; este es un ejemplo de cómo puedes personalizar.
Siéntete libre de consultar la documentación para crear gradientes más complejos.

¡Espero que esto ayude!

[danielabc (Daniela)]

Hola, ¿todo bien? Muchas gracias por responderme.
Intenté este método una vez, pero no lo entendí bien (y más porque no entiendo inglés) pero no funcionó, probé la forma que me mostraste y esta vez los iconos cambian, pero no cambian al color degradado, solo cambian a un color gris, bueno, déjame aclarar estas dudas para ver si no es un error, ¿cuál es el nombre del archivo de texto que guardaste? ¿y qué nombre le pusiste al subir el tema? ¿dónde pusiste el css, en la parte de css de escritorio?

[Arkshine]

Edité el CSS/HTML de mi tema a través de Personalizar → Temas desde el panel de administración.

1. Edite su tema o cree un componente de tema aquí siguiendo Beginner's guide to using Discourse Themes.

2. Haga clic en Editar CSS/HTML

3. En la pestaña Cuerpo, coloque el código SVG
   En la pestaña Común, coloque el CSS

[danielabc (Daniela)]

Tuve muchos problemas con esto, y el problema estaba en la forma en que lo estaba poniendo, jajaja, muchas gracias por enseñarme a ponerlo en el lugar correcto, siempre estaré agradecido por tu ayuda, muchas gracias.