Как вместо символа маркера использовать картинку?

Чтобы задать собственный рисунок маркера для пунктов списка, воспользуйтесь стилевым свойством list-style-image, добавляя его к селектору ul или li. В качестве значения указывается адрес желаемого изображения (рис. 1).

Пример 1. Картинка вместо маркеров

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рисунок в качестве маркера</title>
  <style>
   ul {
    list-style-image: url(/example/image/book.png); /* Изображение маркера */
   }
  </style>
 </head> 
  <body> 
   <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
   </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

Картинка в качестве маркера списка

Рис. 1. Картинка в качестве маркера списка

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

Использование свойства list-style-image имеет некоторые недочёты. Во-первых, нельзя смещать рисунок относительно его исходного положения, во-вторых, в разных браузерах рисунки иногда выводятся с небольшим смещением. Более гибкие настройки имеет свойство background, которое позволяет выводить картинку как фоновый рисунок (пример 2). Его следует добавить к селектору li и убрать отображение исходных маркеров через свойство list-style со значением none.

Пример 2. Фоновый рисунок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рисунок в качестве маркера</title>
  <style>
   li {
    list-style: none; /* Убираем исходные маркеры */
    background: url(/example/image/book.png) no-repeat 0 50%; /* Параметры фона */
    padding-left: 24px; /* Смещаем текст вправо */ 
   }
  </style>
 </head> 
 <body> 
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 2.

Картинка в качестве маркера списка

Рис. 2. Картинка в качестве маркера списка

Чтобы текст не накладывался на фоновый рисунок к селектору li добавлено свойство padding-left, значение которого равно ширине картинки плюс желаемый отступ от рисунка до текста.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 18.09.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid