Я хотел добавить к ответу JOPLOmacedo. Его решение - мое любимое, но у меня всегда были проблемы с отступом, когда в li было больше одной строки. Было трудно найти правильный отступ с полями и т. Д. Но это может касаться только меня.
Для меня абсолютное позиционирование :before
псевдоэлемента работает лучше всего. Я установил padding-left
на ul, отрицательная позиция слева на :before
элементе, так же, как ul padding-left
. Чтобы получить расстояние содержимого от :before
элемента вправо, я просто установил padding-left
на li. Конечно, ли должен иметь относительную позицию. Например
ul {
margin: 0 0 1em 0;
padding: 0 0 0 1em;
/* make space for li's :before */
list-style: none;
}
li {
position: relative;
padding-left: 0.4em;
/* text distance to icon */
}
li:before {
font-family: 'my-icon-font';
content: 'character-code-here';
position: absolute;
left: -1em;
/* same as ul padding-left */
top: 0.65em;
/* depends on character, maybe use padding-top instead */
/* .... more styling, maybe set width etc ... */
}
Надеюсь, это понятно и имеет значение для кого-то другого, кроме меня.