얇은 아이콘에 그라데이션을 적용하는 방법은?

개발
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 문서에서 확인한 바로는 SVG에 <linearGradient>를 추가해야 합니다.

다른 참고 자료:

theme/component에 숨겨진 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에서 색상을 정의하고 fill로 채우려는 SVG 요소를 지정합니다:

/* 그라디언트 색상 정의 */
#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의 두 번째 값은 폴백(fallback) 색상입니다.

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

광범위하게 테스트하지는 않았으며, 이는 커스터마이징 방법을 보여주는 예시입니다.
더 복잡한 그라디언트를 만들려면 문서를 참고해 보세요.

도움이 되기를 바랍니다!

5

안녕하세요, 모든 것이 괜찮으신가요? 답변해 주셔서 정말 감사합니다.

이전에는 이 방법을 한 번 시도해 봤지만 제대로 이해하지 못했어요(영어를 잘 못해서 더 그랬죠). 그래서 작동하지 않았습니다. 이번에는 말씀해 주신 대로 해 봤더니 아이콘은 바뀌긴 하는데, 그라디언트 색상으로 바뀌지 않고 회색으로만 변합니다. 혹시 제가 뭔가 잘못 이해한 건 아닌지, 이 부분을 명확히 하고 싶습니다. 저장하신 텍스트 파일의 이름은 무엇인가요? 그리고 테마를 업로드할 때 어떤 이름을 넣으셨나요? CSS는 데스크톱용 CSS 부분에 넣으신 건가요?

image
image967×677 14.5 KB

6

관리자 패널의 Customize → Themes에서 테마의 CSS/HTML을 편집했습니다.

  1. Beginner's guide to using Discourse Themes 링크를 참고하여 여기서 테마를 편집하거나 테마 컴포넌트를 생성하세요.

  2. Edit CSS/HTML을 클릭하세요.

  3. Body 탭에 SVG 코드를 넣고, Common 탭에 CSS를 넣으세요.

image
image537×376 16.4 KB

image
image474×414 13.1 KB

7

이 문제로 정말 고생했는데, 결국 제 방식이 문제였어요 ㅋㅋ. 어디에 어떻게 넣어야 하는지 알려주셔서 정말 감사합니다. 도움을 주신 덕분에 항상 감사할게요. 정말로 감사합니다!