How do I put gradient on thin icons?

Development

AI-generated summary

How to Put Gradient on Thin Icons

danielabc is struggling to put a gradient on thin icons and shares examples of their attempts. Arkshine suggests adding <linearGradient> to the SVG and provides resources and an example of how to create a hidden SVG in the theme/component to define gradients.

The example involves adding an SVG with a linear gradient in the theme’s HTML and targeting the SVG elements with CSS to fill with the gradient. Arkshine also explains how to define the color and target specific SVG elements.

danielabc tries the method and reports that the icons change, but not to the gradient color. Arkshine clarifies that the code should be added to the theme’s CSS/HTML via the admin panel and provides a step-by-step guide.

danielabc eventually resolves the issue, realizing that the problem was with the placement of the code, and expresses gratitude to Arkshine for their help.

1

I tried everything, I can’t put gradient degrade on icons like these here

image
image1920×1080 174 KB

2

I’ve tried everything and I can’t change :frowning:

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

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

}

image
image526×116 4.8 KB

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

1. color: red;

}

image
image506×142 2.18 KB

4

Hi,

From what I read in Gradients in SVG - SVG | MDN, you must add <linearGradient> to the SVG.

Others resources:

What you can do is create a hidden SVG in your theme/component to define your gradients:

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

Then, in your CSS, you define the color, and you target what SVG elements you want to 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);
    }
}

Note: the second value of fill is a fallback color.

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

I did not test extensively; this is an example of how you can customize.
Feel free to check the documentation to make more complex gradients.

I hope that helps!

5

Hello everything is fine? thank you very much for answering me
so I had tried this method once, but I couldn’t understand it properly (even more so because I don’t understand English) but it didn’t work, I tried the way you showed me and this time the icons change, but they don’t change for the gradient color, they just change to a gray color, well, let me clear these doubts to see if it is not such an error, what is the name of the text file that you saved? and what name did you put when uploading the theme? where did you put the css, in the css desktop part?

image
image967×677 14.5 KB

6

I edited my theme CSS/HTML vis Customize → Themes from the admin panel.

  1. Either edit your theme or create a theme component here by following Beginner's guide to using Discourse Themes.

  2. Click on Edit CSS/HTML

  3. In Body tab, you put the SVG code
    In Common tab, you put the CSS

image
image537×376 16.4 KB

image
image474×414 13.1 KB

7

I had so much trouble with this, and the problem was in the way I was putting it lol, thank you very much for teaching me how to put it in the right place, I will always be grateful for your help, thank you very much