Работа с текстом и иконками-маркерами в списке с Bootstrap
Подскажите, делаю тестовый проект работая на Bootstrap 5, столкнулся с проблемой, которую никак не могу решить, надеюсь подскажите в какую сторону нужна думать - пробовал разные варианты, но совсем не помогло, не понимаю как это делается. Прилагаю скриншот. Проблема в переносе текста, при создании списка большой текст переносится в нём с большими интервалами. Иконки и текст находятся внутри списка, т.к. не знаю как иначе выравнивать их, так проще всего вроде как, но проблема с текстом тогда. Код html такой:
<li class="mb-1"><img class="icon me-2" src="./Image/Icon/Sqok.svg" alt="icon">Мы согласовываем с Вами эскиз и все нюансы;</li>
Класс icon задаёт иконке просто размеры:
.icon {
width: 48px;
height: 48px;
}
Куда думать?
Ответы (1 шт):
Я бы советовал Вам иконки пунктов реализовать через псевдоэлемент, скажем, before элемента li. Потом Вас будет проще управлять этим через CSS. То есть, Вы сам элемент списка li позиционируете относительно через position: relative;, а его псевдоэлемент позиционируете абсоютно с левой стороны. Самому элементу li нужно будет придать некий внутренний отступ слева padding-left, чтобы избежать наложение Вашей иконки поверх текста.
Например, при такой разметке:
<ul class="list">
<li class="mb-1">Мы обговариваем с Вами все детали: тематику, стиль и сюжет портрета;</li>
<li class="mb-1">Вы вносите предоплату в размере 30% от стоимости шаржа;</li>
<li class="mb-1">Я создаю предварительный эскиз;</li>
<li class="mb-1">Мы согласовываем с Вами эскиз и все нюансы;</li>
</ul>
я использовал следующие стили:
.mb-1 {
position: relative;
padding-left: 40px; // здесь регулируется расстояние между иконкой и текстом
}
.mb-1::before {
content: "";
display: inline-block; // это нужно, чтобы можно было управлять шириной и высотой элемента
width: 48px;
height: 48px;
background: url([= здесь Ваш путь к иконке =]) 0 0 /cover no-repeat;
position: absolute;
left: 0; // этими значениями выставляйте иконку относительно элемента списка
top: -3px;
}