Comment mettre un dégradé sur des icônes fines ?

[danielabc (Daniela)]

J’ai tout essayé, je n’arrive pas à appliquer un dégradé à des icônes comme celles-ci

[danielabc (Daniela)]

J’ai tout essayé et je n’arrive pas à changer

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

Salut,

D’après ce que j’ai lu dans Gradients in SVG - SVG | MDN, vous devez ajouter <linearGradient> au SVG.

Autres ressources :

• Gradient fills for SVG icons
• SVG Gradients

Ce que vous pouvez faire, c’est créer un SVG caché dans votre thème/composant pour définir vos dégradés :

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

  <!-- Définir le dégradé spécifique selon les besoins avec un ID unique -->
</svg>

Ensuite, dans votre CSS, vous définissez la couleur et vous ciblez les éléments SVG que vous souhaitez remplir (fill) :

/* définit la couleur des dégradés */
#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 {
    /* cible toutes les icônes svg */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* cible uniquement l'icône de chat */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Remarque : la deuxième valeur de fill est une couleur de secours.

Je n’ai pas testé de manière exhaustive ; ceci est un exemple de la façon dont vous pouvez personnaliser.
N’hésitez pas à consulter la documentation pour créer des dégradés plus complexes.

J’espère que cela vous aidera !

[danielabc (Daniela)]

Bonjour, tout va bien ? Merci beaucoup de me répondre.
J’avais déjà essayé cette méthode une fois, mais je ne l’avais pas bien comprise (d’autant plus que je ne comprends pas l’anglais), mais cela n’avait pas fonctionné. J’ai essayé la façon dont vous me l’avez montré et cette fois les icônes changent, mais elles ne changent pas pour la couleur du dégradé, elles changent juste pour une couleur grise. Bon, laissez-moi éclaircir ces doutes pour voir si ce n’est pas une erreur. Quel est le nom du fichier texte que vous avez enregistré ? Et quel nom avez-vous mis lors de l’upload du thème ? Où avez-vous mis le CSS, dans la partie CSS du bureau ?

[Arkshine]

J’ai modifié le CSS/HTML de mon thème via Personnaliser → Thèmes depuis le panneau d’administration.

1. Modifiez votre thème ou créez un composant de thème ici en suivant Beginner's guide to using Discourse Themes.

2. Cliquez sur Modifier CSS/HTML

3. Dans l’onglet Corps, vous placez le code SVG
   Dans l’onglet Commun, vous placez le CSS

[danielabc (Daniela)]

J’ai eu tellement de mal avec ça, et le problème venait de la façon dont je le mettais lol, merci beaucoup de m’avoir appris à le mettre au bon endroit, je serai toujours reconnaissant de votre aide, merci beaucoup