Изменение размера list-style-image

Я хочу применить изображения в качестве значков списка к следующему списку:

                     <ul id="AB1C2D">
                        <li  id="AB1C2D1">Dashboard
                        </li>
                        <li id="AB1C2D2">Mechanics
                        </li>  
                        <li  id="AB1C2D3">Individuals
                        </li>
                        <li id="AB1C2D4">Settings
                        </li>
                        <li id="AB1C2D5">Messages
                        </li>  
                        <li  id="AB1C2D6">Support
                        </li>
                        <li id="AB1C2D7">Logout                  
                        </li>
                    </ul>

Я пытался

ul li{
padding-left: 22px;
background: url("img/piz.png") left center no-repeat;
line-height: 22px;
list-style-position: outside;
}

У меня получился список на фоне в форме коробки без изображений Также я пробовал

ul li{
list-style-image: url("img/piz.png");
width: 10px;
height: 10px;
}

ul li:before {
width: 10PX;
height: 10PX;
size: 3px;
}

У меня появились большие изображения рядом со списком, создающие большие промежутки между каждым элементом списка

я ищу, как управлять размером списка, чтобы были маленькие иконки по бокам списка. пожалуйста, помогите

The issue with your code is, background-image is applied to the complete list li , not just where the bullet is exist.

list-style-image didn't support scaling option.

HTML:

<ul id="AB1C2D">
  <li id="AB1C2D1">Dashboard</li>
  <li id="AB1C2D2">Mechanics</li>  
  <li id="AB1C2D3">Individuals</li>
  <li id="AB1C2D4">Settings</li>
  <li id="AB1C2D5">Messages</li>  
  <li id="AB1C2D6">Support</li>
  <li id="AB1C2D7">Logout</li>
</ul>

CSS:

#AB1C2D {
  list-style: none;
  padding: 0;
  margin: 0;
}

#AB1C2D li {
  position: relative;
  padding-left: 28px;
  margin: 6px 0;
  line-height: 1.5;
}

#AB1C2D li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("https://cdn-icons-png.flaticon.com/512/1828/1828817.png"); /* change this image path to as your wish */
  background-size: contain;
  background-repeat: no-repeat;
}

screenshot

ul {
  list-style-type: none;
}

li {
   line-height: 32px;
   position: relative;
   padding: 0 0 0 28px;
}

li:before {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/35/Information_icon.svg");
  background-size: 22px 22px;
  content: "";
  left: 0px;
  position: absolute;
  width: 22px;
  height: 22px; 
  top: 50%;
  transform: translateY(-50%);
}
  <ul id="AB1C2D">
    <li id="AB1C2D1">Dashboard</li>
    <li id="AB1C2D2">Mechanics</li>  
    <li id="AB1C2D3">Individuals</li>
    <li id="AB1C2D4">Settings</li>
    <li id="AB1C2D5">Messages</li>  
    <li id="AB1C2D6">Support</li>
    <li id="AB1C2D7">Logout</li>
  </ul>

Вернуться на верх