Создание и выравнивание самодельных маркеров у списков

Иногда простая задача имеет неочевидное решение

Требуется: сделать и выравнять самодельные маркеры для списков.

Казалось бы, можно использовать list-style (либо по отдельности: list-style-type, list-style-position и list-style-image)

Однако, это не всегда удобно, и в первую очередь из-за сложности выравнивывания маркеров относительно текста

Поэтому, применим такое же простое, но более гибкое решение

1. Задаем класс для нашего для нашего блока, внутри которого будет список, в моем случае:
.list-1881

2. Отключаем стандартный вывод маркерв в списке:
list-style:none;

3. Устанавливаем необходимое изображение для нашего списка, в моем случае:
url(../img/web/icon-16-1881.svg)

4. Выравниваем изображение и указываем, чтобы оно не повторялось, в моем случае:
0 2px no-repeat

5. Задаем span и создаем необходимый отступ между маркером и текстом, в моем случае:
margin-left:20px;

В результате получается следующий css код:

<style>
.list-1881 ul {list-style:none;}
.list-1881 ul li {background:url(../img/web/icon-16-1881.svg) 0 2px no-repeat;}
.list-1881 ul li span {margin-left:20px;}
</style>

5. Создаем тестовый список и присваиваем ему сделанный выше класс:

<div class="list-1881">
<ul>
<li><span>Lorem ipsum dolor sit amet</span></li>
<li><span>Lorem ipsum dolor sit amet</span></li>
<li><span>Lorem ipsum dolor sit amet</span></li>
<li><span>Lorem ipsum dolor sit amet</span></li>
<li><span>Lorem ipsum dolor sit amet</span></li>
</ul>
</div>

Получаем результат: