Como colocar gradiente em ícones finos?

[danielabc (Daniela)]

Eu tentei de tudo, não consigo colocar gradiente degradê em ícones como estes aqui

[danielabc (Daniela)]

Tentei de tudo e não consigo mudar

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

Olá,

Pelo que li em Gradients in SVG - SVG | MDN, você precisa adicionar <linearGradient> ao SVG.

Outros recursos:

• Gradient fills for SVG icons
• SVG Gradients

O que você pode fazer é criar um SVG oculto em seu tema/componente para definir seus 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 o gradiente específico conforme necessário com um ID exclusivo -->
</svg>

Em seguida, em seu CSS, você define a cor e segmenta quais elementos SVG você deseja preencher (fill):

/* define a cor dos gradientes */
#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 {
    /* segmenta todos os ícones svg */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* segmenta apenas o ícone de chat */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Observação: o segundo valor de fill é uma cor de fallback.

Não testei extensivamente; este é um exemplo de como você pode personalizar.
Sinta-se à vontade para consultar a documentação para criar gradientes mais complexos.

Espero que ajude!

[danielabc (Daniela)]

Olá, tudo bem? muito obrigado por me responder

então eu já tinha tentado esse método uma vez, mas não tinha conseguido entender direito (ainda mais que não entendo inglês) mas não tinha dado certo, tentei do jeito que você me mostrou e dessa vez os ícones mudam, mas não mudam para a cor gradiente, eles mudam apenas para uma cor cinza, bom, deixa eu tirar essas dúvidas para ver se não é erro mesmo, qual o nome do arquivo de texto que você salvou? e qual nome você colocou na hora de fazer o upload do tema? onde você colocou o css, na parte de css desktop?

[Arkshine]

Eu editei o CSS/HTML do meu tema em Personalizar → Temas no painel de administração.

1. Edite seu tema ou crie um componente de tema aqui seguindo Beginner's guide to using Discourse Themes.

2. Clique em Editar CSS/HTML

3. Na aba Body, você insere o código SVG
   Na aba Common, você insere o CSS

[danielabc (Daniela)]

Tive tantos problemas com isso, e o problema estava na forma como eu estava colocando, lol, muito obrigado por me ensinar a colocar no lugar certo, serei sempre grato pela sua ajuda, muito obrigado.