تنسيق صورة القائمة في css

لا يمكنك التحكم بحجم الصورة التي تضيفها بجانب عناصر القائمة لذلك يفضل اضافة صورة لها ابعاد مناسبة وصغيرة مع القائمة 
او يمكنك ذلك من خلال اتعباع طريقة اخرى ولكنها سوف تعطي نفس النتيجة تقريبا 

من خلال اضافة خلفية للعناصر ثم التحكم في تموضعها لتظهر كأنها الرمز الخاص بعنصر القائمة 

دعني اكتب لك الكود الخاص بملف ال style.css  وسأشرح لك كل سطر ماهي وظيفته 

ul{
	/* في البداية نلغي الستايل الخاص بالقائمة بهذه الطريقة */
	list-style: none;
}

ul > li {
	/* في البداية ساقوم بتحديد الصورة التي تريدها على انها خلفية للعناصر  */
background-image: url("images/book.jpg");
/* ثم وضعت هذا العنصر لامنع الخلفية من تكرار نفسها */
background-repeat: no-repeat;
/* ثم وضعت هذا العنصر لتحديد مكان الصورة وجعلها تأخد محاذات للبسار*/
background-position: left ;
/* ثم وضعت هذا العنصر لتحديد حجم الصورة يمكنك تغيير الحجم كما تريد*/
background-size: 30px;
/* وفي النهاية وضعت حواشي للخلفية لكي تبتعد عن عنصر ال li  */
padding:10px 0 10px 45px;


/* 10px padding top
0 padding right
10px padding bottom 
45px padding left */

}

أرى أن المشكلة تكمن في استخدام list-style-image لتعيين صورة كخلفية لعناصر القائمة ul (الغير مرتبة)، فقد يحدث أن الصورة تأخذ مساحة كبيرة جدا وتصبح غير مناسبة للتصميم المطلوب.

لحل المشكلة، ولتغيير حجم الصورة وتنسيقها بشكل أفضل، يجب استخدام الخصائص الصحيحة في CSS.

بدءا بإزالة التباعد الافتراضي للقائمة:

ul {
    padding: 0;
}

ثم تعيين صورة القائمة وتحديد حجمها:

ul {
    list-style-image: url(images/book.jpg); /* تعيين صورة القائمة */
    background-size: 30px 30px; /* تحديد حجم الصورة */
    background-repeat: no-repeat; /* تأكيد عدم تكرار الصورة */
}

وتحديد التباعد بين الصورة والنص:

ul li {
    padding-left: 40px; /* تعيين التباعد الأيسر لكل عنصر */
}

ويمكنني تفسير الخطوات التي قمنا بها، فإزالة التباعد الافتراضي للقائمة ul نقوم به لتجنب أي تأثير غير مرغوب فيه على التصميم ونقوم بتعيين صورة القائمة وتحديد حجمها باستخدام background-size، مما يسمح لنا بتحكم دقيق في الحجم ومنع الصورة من التكبير أو التصغير بشكل غير مرغوب فيه.

ونقوم بتحديد التباعد بين الصورة والنص لكل عنصر في القائمة، وذلك باستخدام padding-left لتجنب اختلاط النص بالصورة، أعتقد أن الإجابة مشروحة بشكل مفصل.

مرحبا صديقي المشكلة في list-style-image حيث يتعين عند استخدامها استخدام صور صغير من نوع gif 
اذ كنت تريد استخدام صور كبيرة الحجم والتحكم في حجمها
او قم باذالة الابتعاد :
 

li {
	list-style: none;
}

ثانية يمكنك استخدام عنصر زائف pseudo-element
مثل هذا
 

li::before {
	content: '';
	display: inline-block;
	margin-right: 10px;
	height: 20px;
	width: 20px;
	background-image: url("images/book.jpg");
	background-size: cover;
	}

وبذاك تستطيع التحكم في height وال width

بالإضافة للحلول السابقة وجميعها تعمل بشكل مثالي يمكنك أيضاً استخدام الخاصية width و height إذا كنت تستخدم ال inline-svg كمايلي 

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}

span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

ال html

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>