Как добавить градиент на тонкие иконки?

Разработка
1

Я перепробовал всё, но не могу применить градиентное затухание к иконкам, как на этом изображении:

image
image1920×1080 174 KB

2

Я перепробовал всё, но не могу изменить :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

Привет,

Согласно тому, что я прочитал на Gradients in SVG - SVG | MDN, вам нужно добавить тег <linearGradient> в SVG.

Другие ресурсы:

Вы можете создать скрытый SVG в вашем теме/компоненте, чтобы определить ваши градиенты:

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

  <!-- Определите конкретный градиент по мере необходимости с уникальным ID -->
</svg>

Затем в вашем CSS вы определяете цвета и указываете, какие элементы SVG нужно заполнить (fill):

/* Определяет цвета градиентов */
#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 {
    /* Применяется ко всем SVG-иконкам */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* Применяется только к иконке чата */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Примечание: второе значение свойства fill является запасным цветом.

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

Я не проводил обширного тестирования; это пример того, как можно настроить градиенты.
Не стесняйтесь обратиться к документации, чтобы создать более сложные градиенты.

Надеюсь, это поможет!

5

Здравствуйте, всё ли в порядке? Большое спасибо за ответ.

Я уже пробовал этот метод ранее, но не смог до конца его понять (тем более что я не знаю английский), и у меня ничего не получилось. Я попробовал способ, который вы показали, и на этот раз иконки изменились, но не на градиентный цвет, а просто стали серыми. Давайте проясним эти моменты, чтобы убедиться, что я не совершаю ошибки: как называется текстовый файл, который вы сохранили? Какое имя вы указали при загрузке темы? Куда вы поместили CSS — в раздел CSS для десктопа?

image
image967×677 14.5 KB

6

Я отредактировал CSS/HTML своей темы через Настроить → Темы в панели администратора.

  1. Либо отредактируйте свою тему, либо создайте компонент темы здесь, следуя инструкции: Beginner's guide to using Discourse Themes.

  2. Нажмите на Редактировать CSS/HTML.

  3. Во вкладке Body вставьте код SVG.
    Во вкладке Common вставьте CSS.

image
image537×376 16.4 KB

image
image474×414 13.1 KB

7

У меня было столько проблем с этим, и дело было в том, как я это размещал, lol. Большое спасибо за то, что научили меня правильно это размещать. Я всегда буду благодарен за вашу помощь, большое спасибо.