How do I put gradient on thin icons?

Dev
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

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

1. color: red;

}

image

4

Hi,

From what I read in Gradients in SVG - SVG: Scalable Vector Graphics | 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!

2 Likes
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
image

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

1 Like