كيف أجعل أيقونات Navbar SVG بيضاء؟

مطور
1

مرحباً. أنا أستخدم أيقونات رأس مخصصة .
wwww

أود أن تكون هذه بيضاء.

2

يبدو أن المكون يستخدم عنصرًا بفئة custom-header-icon-link لاحتواء كل أيقونة. إذا كنت تستخدم أيقونات SVG، فيجب أن تكون قادرًا على استهدافها كالتالي:

.custom-header-icon-link svg {
    stroke: white;
}

في بعض الأحيان تبدو أيقونات SVG وكأنها مصنوعة من خطوط ولكنها في الواقع مصنوعة من أشكال مملوءة، لذلك قد تحتاج إلى تغيير stroke: white إلى fill: white.

إعجاب واحد (1)
3

مرحباً، تجربة كليهما لا تزال تجعلهما يبدوان هكذا:
wwww
مع CSS الذي قدمته، لم يحدث أي تغيير.

5

حسنًا، لست متأكدًا مما يحدث هناك! قد تحتاج إلى التحقق مرة أخرى للتأكد من أن الأيقونات هي ملفات SVG وليست ملفات صور. يمكنك أيضًا تجربة stroke: white !important; في حال كان هناك نمط آخر يتجاوزها.

أحد “اختبارات التحقق” التي أحب القيام بها مع CSS عندما لا يبدو أنها تفعل شيئًا هو إضافة background-color إلى المحدد.

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

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

مع Chrome، يمكنك الضغط على Ctrl+Shift+C والنقر على الأيقونة للانتقال إليها في القائمة. إذا كنت ترغب في نشر لقطة شاشة لعرض العناصر، فيمكننا إلقاء نظرة على كيفية تنظيم الأشياء. على سبيل المثال، هذا ما يبدو عليه الأمر بالنسبة لي عندما أجرب المكون في المعاينة:

image
image424×184 18.5 KB

6

سأجرب ذلك عندما أعود إلى المنزل. لقد حاولت جعل هذا يعمل لمدة 8 ساعات تقريبًا :upside_down_face: كان لون الخلفية أحد الأشياء التي جربتها سابقًا وتعبثت بعنصر الفحص بلا توقف ولكن لم ينجح الأمر. سأجرب “الشيء المهم” لاحقًا عندما أعود إلى المنزل في غضون ساعات قليلة وأترك تحديثًا! ونعم، إنها روابط .SVG بنسبة 100٪.

7

آه يا رجل، يبدو الأمر محبطًا!

هناك تقنية أخرى يمكن أن تكون مفيدة لاستكشاف الأخطاء وإصلاحها وهي إضافة الأنماط مباشرة إلى العنصر في الفاحص لمعرفة ما إذا كان ذلك يعمل (باستخدام جزء element.style من علامة التبويب styles). ملاحظة: هذه تغييرات مؤقتة تؤثر فقط على النافذة الحالية ويتم حذفها عند التحديث.

image
image592×155 21.2 KB

8

إليك أيقوناتي وهذا هو عنصر الفحص الخاص بها:

bbbb
bbbb720×375 20.8 KB

لقد جربت جميع أكواد CSS التي أدرجتها، وجربت كلًا من “stroke” و “fill”. لم تعمل “important!” أيضًا. ليس لدي فكرة عما يسبب هذا.
ربما عثرت على شيء ما. لاحظت أنه على الرغم من أنني أستخدم صور SVG، إلا أن عنصر الفحص لا يزال يظهرها في علامة <img> مقابل class="svg<" التي تظهر لديك. هل هذه مشكلة في Custom Header Icons؟

9

آها، نعم يبدو أن هذا هو سبب عدم قيام التغييرات بأي شيء - لا توجد علامة <svg> فعلية. لا أعتقد أن هناك خطأ في أن المكون وضعه في علامة <img>. هذه مجرد إحدى طرق عرض SVG، لكنها تجعل من الصعب تنسيقها. إذا كان لديك وصول إلى ملفات SVG نفسها، يمكنك تغيير لون الخط أو الملء هناك (سيكون سمة مثل stroke="black"، وقد يكون هناك أكثر من واحدة).

إذا لم تتمكن من تحرير SVG، يمكنك محاولة استخدام عوامل تصفية CSS. تتيح لك هذه إضافة تأثيرات مرئية معينة إلى عنصر. نظرًا لأنها تبدو سوداء الآن، يمكننا محاولة عكسها للحصول على اللون الأبيض.

.custom-header-icon-link img {
  filter: invert(100%);
}

لاحظ أن المحدد يحتاج إلى أن يكون img بدلاً من svg الآن

إعجابَين (2)