كيف أضع تدرجًا على الأيقونات الرفيعة؟

[danielabc (Daniela)]

لقد جربت كل شيء، لا يمكنني وضع تدرج لوني على أيقونات كهذه هنا

[danielabc (Daniela)]

لقد جربت كل شيء ولا يمكنني التغيير

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

أهلاً،

بناءً على ما قرأته في https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients، يجب عليك إضافة <linearGradient> إلى SVG.

مصادر أخرى:

• Gradient fills for SVG icons
• SVG Gradients

ما يمكنك فعله هو إنشاء 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>

  <!-- Define specific gradient as needed with a unique ID -->
</svg>

بعد ذلك، في ملف CSS الخاص بك، يمكنك تعريف اللون واستهداف عناصر SVG التي تريد ملؤها:

/* 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);
    }
}

ملاحظة: القيمة الثانية لـ fill هي لون احتياطي.

لم أقم بالاختبار بشكل مكثف؛ هذا مثال لكيفية التخصيص.
لا تتردد في مراجعة الوثائق لإنشاء تدرجات أكثر تعقيدًا.

آمل أن يكون هذا مفيدًا!

[danielabc (Daniela)]

مرحباً، هل كل شيء على ما يرام؟ شكراً جزيلاً لك على الرد عليّ.
لقد جربت هذه الطريقة مرة واحدة، لكنني لم أتمكن من فهمها بشكل صحيح (خاصة وأنني لا أفهم اللغة الإنجليزية)، لكنها لم تنجح. لقد جربت الطريقة التي أظهرتها لي وهذه المرة تغيرت الأيقونات، لكنها لم تتغير إلى اللون المتدرج، بل تغيرت فقط إلى اللون الرمادي. حسناً، دعني أوضح هذه الشكوك لمعرفة ما إذا كان هذا خطأ، ما هو اسم الملف النصي الذي حفظته؟ وما هو الاسم الذي وضعته عند تحميل السمة؟ وأين وضعت ملف الـ CSS، في جزء الـ CSS لسطح المكتب؟

[Arkshine]

لقد قمت بتحرير CSS/HTML الخاص بالقالب الخاص بي عبر تخصيص → القوالب من لوحة الإدارة.

1. إما قم بتحرير القالب الخاص بك أو قم بإنشاء مكون قالب هنا باتباع Beginner's guide to using Discourse Themes.

2. انقر على Edit CSS/HTML

3. في علامة التبويب Body، ضع كود SVG
   في علامة التبويب Common، ضع CSS

[danielabc (Daniela)]

لقد واجهت الكثير من المتاعب مع هذا، وكانت المشكلة في الطريقة التي كنت أضعها بها، شكرًا جزيلاً لك على تعليمي كيفية وضعها في المكان الصحيح، سأكون ممتنًا دائمًا لمساعدتك، شكرًا جزيلاً لك.