Как мне прилепить к каждому пункту li РАЗНЫЕ png картинки вместо маркеров?

Question

Помогите пожалуйста сверстать меню, все способы уже перебрал по-моему однако картинки не выводятся. Итак... Сверстал макет с помощью одного сервиса который из psd как-то ( плохо конечно) верстает макеты в HTML. Все каартинки все иконки он автоматом порезал в формат png. Меню сайта сервис обернул в тег

в котором тег без ссылок просто текст. Мне и сие нужно было если честно - терепь можно не морочиться с подключением шрифта, размерами блоков и т.п. Стал приводить меню моего шаблончика в порядок вот код:

.left-bar {
    float: left;
    width: 178px;
    background: #375e89;
}

.lb-block {
    margin: 0;
    padding: 20px;
}

.lb-block  ul {
    clear: both;
    margin: 0 0 0 15px;
    padding: 0px;
}

.lb-block  ul li {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
}

.lb-block  ul li a {
    font-size: 13px;
    color: #c3d6ed;
}

.lb-block  ul li a:hover {
    color: #fff;
}

<div class="left-bar">
    <div class="lb-block">
    <ul>
    <li class="imuser"><a href="#">Моя страница</a></li>
    <li class="user-news"><a href="#">Новости</a></li>
    <li class="user-message"><a href="#">Сообщения</a></li>
    <li class="user-friends"><a href="#">Друзья</a></li>
    <li class="user-communities"><a href="#">Сообщества</a></li>
    <li class="user-photo"><a href="#">Фотографии</a></li>
    <li class="user-music"><a href="#">Музыка</a></li>
    <li class="user-video"><a href="#">Видео</a></li>
    <li class="user-clips"><a href="#">Клипы</a></li>
    <li class="user-games"><a href="#">Игры</a></li>
    <li class="user-vkpay"><a href="#">VK Pay</a></li>
    <li class="user-jops"><a href="#">Работа</a></li>
    <li class="user-products"><a href="#">Товары</a></li>
    <li class="user-bookmarks"><a href="#">Закладки</a></li>
    <li class="user-virus"><a href="#">Коронавирус</a></li>
    </ul>
    </div>
    </div>

Как мне прилепить к каждому пункту li РАЗНЫЕ png картинки вместо маркеров? В курсе что есть давно иконки font awesome, svs и т.п. Но мне нужно сейчас временно именно так, поскольку в последствии буду рисовать свои иконки на подобии FA.

Answer 1

.left-bar {
    float: left;
    width: 178px;
    background: #375e89;
}

.lb-block {
    margin: 0;
    padding: 20px;
}

.lb-block  ul {
    clear: both;
    margin: 0 0 0 15px;
    padding: 0px;
}

.lb-block  ul li {
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    list-style: none;
}

.lb-block  ul li a {
    font-size: 13px;
    color: #c3d6ed;
}

.lb-block  ul li a:hover {
    color: #fff;
}
  .image_1{
width: 10%;
padding-right: 10px;
position: relative;
top: 2px;}

<div class="left-bar">
    <div class="lb-block">
    <ul>
    <li class="imuser"><img class="image_1" src="https://sevstroyrem.ru/img_88994.png"><a href="#">Моя страница</a></li>
    <li class="user-news"><img class="image_1" src="https://im0-tub-ru.yandex.net/i?id=34477a490b238b27970ce840eaeca259&n=13"><a href="#">Новости</a></li>
    <li class="user-message"><img class="image_1" src="https://c7.uihere.com/files/193/839/800/email-address-computer-icons-envelope-mail.jpg"><a href="#">Сообщения</a></li>
    <li class="user-friends"><img class="image_1" src="http://freepngclipart.com/download/computer/74969-living-lugano-icons-computer-health-verb-phrasal.png"><a href="#">Друзья</a></li>
    <li class="user-communities"><img class="image_1" src="https://shelaghcummins.com/electrifyyourbusiness/images/icons/accountability%20groups.png"><a href="#">Сообщества</a></li>
    </ul>
    </div>
    </div>

URL только свои подставьте

БЛОГ НА HUSL

Как мне прилепить к каждому пункту li РАЗНЫЕ png картинки вместо маркеров?

Ответы (1 шт):