كيفية اضافة ايقونة الى القائمة

السلام عليكم
عندي مشكلة في المهمة الاخيرة من ورشة الفرونت ايند مطلوب اضيف ايقونة الى الليست ايتم
كتبت الكود كامل وحملت الايقونات الي اريد استخدمهم وضفتهم في المجلد المخصص ولكن المشكلة
عندما استدعيهم عن طريق الcss لاتظهر الصور وتاكدت من مسار الملف اكثر من مرة
ولكن عندما ابدل مسار الصور برابط صورة من الانترنت تظهر ولكن المشكلة ليش الايقونات الي بالملف
لايعمل


<!DOCTYPE html>
<html lang="en">

 <head>
    <title>List</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body>
    <ul>
        <li class="list-check">دفع بالتقسيط</li>
        <li class="list-check">شحن مجاني</li>
        <li class="list-check">ضمان 3 سنوات</li>
        <li class="list-uncheck">قابل للأرجاع</li>
        <li class="list-uncheck">قابل للأستبدال</li>
    </ul>
 </body>
</html>

css

body {
    direction: rtl;
}
ul {
    list-style-position: inside;
}
.list-check {
    list-style-image: url('images/check.png');
}
.list-uncheck {
    list-style-image: url(images/uncheck.png);
}

Demo

2 Likes

مرحبا @mohamed1

ملف التنسيقات الـ style.css يوجد بداخل مجلد CSS

والكود التالي:

url('images/check.png')

سيعمل عندما يكون مجلد images أيضاً بداخل مجلد css.

لكن في حالتك مجلد images هو خارج مجلد css لهذا يجب أن نقوم بإخبار ملف style.css بأن يخرج من المجلد css للبحث عن مجلد الصور بإستخدام النقطتين ../

كما بالكود التالي

url('../images/check.png')

فالأن إذا وضعت هذا الكود كمسار للصورة فسوف يفهم ملف style.css بأن عليه الخروج من مجلد css ومن ثم البحث عن مجلد images.

اتمنى أن تكون الصورة قد إتضحت ولا تقلق بخصوص ذلك هذا أحد المواضيع التي راح نناقشها خلال الدروس القادمة :blush:

2 Likes

اها شكراً لك وصلت الفكرة :star_struck:

1 Like