Проблема

Я уже знаю, как добавить изображение пуль с помощью CSSbackground-image имущество. То, что я сейчас пытаюсь сделать, это отобразить маленький графический значок слева от номера строки в упорядоченном списке.

Проблема, с которой я продолжаю сталкиваться, заключается в том, что при попытке поместить изображение маркера оно не отображается на экране. Я могу видеть, что это там, подталкивая изображение вдоль оси X вправо, поэтому я не знаю, что это отображает неправильно.

Примечание: яМожно заставить значок появляться справа от числа перед текстом, но это не желаемый результат.

Мой код

.action-item {
    background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
    background-position: -4px 2px;
    background-repeat: no-repeat;
    line-height: 1.5;
    background-size: 1.4em;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-indent: 1.4em;
}

<ol>
  <li class="action-item">item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li class="action-item">item 4</li>
  <li class="action-item">item 5</li>
  <li>item 6</li>
</ol>

Что я уже пробовал

Я пробовал настраиватьtext-indent, padding-left, margin-left, line-heightвсе безрезультатно.

Идеи, которые я не пробовалoverflow: hiddenz-indexМой вопрос

Возможно ли это с чистым CSS, и если да, что я делаю не так?