Сайты под ключ Мякушин.ру

Как добавить элементам списка (li) иконки svg

Если вы хотите добавить иконки элементам с тегом li, таким образом, чтобы можно было поменять в любой момент через стили цвет, размер и отступы, а также чтобы иконки были в потоке (толкали текст), то следуйте следующей инструкции.

Инструкция

  1. Добавим html разметку, используя теги ul, li
  2. Добавим стили CSS для элементов списка (items)
  3. Добавляем иконки через псевдоэлемент before

Другой способ - точное позиционирование + покажу другой способ добавления иконки.

1. Добавим html разметку, используя теги ul, li

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

2. Добавим стили CSS для элементов списка (items)

  1. Обнуляем стили 
    ul,
ol,
li {
    list-style: none;
}
  2. Задаём отступы снизу для всех кроме последнего item 
    li:not(:last-child) {
    margin-bottom: 8px;
}
  3. Для тега li добавляем значение flex. Мы сможем задавать для иконки значения для свойств width, height, margin; выравним иконку с помощью свойств и значений флекбоксов 
    li {
    display: flex;
    align-items: center;
}

3. Добавляем иконки через псевдоэлемент before

  1. В стилях добавляем псевдоэлемент before. 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg>');
}
  2. Вместо тега svg вставляем код иконки. Код иконки можно скопировать в фигме, нажимаем на иконку svg правой кнопкой мыши, выбираем "Copy / paste as" далее "Copy as SVG". Получаем вот такие стили: 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="#127359"/>
    </svg>
        ');
}
  3. Убираем лишние пробелы 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="#127359"/></svg>');
}
  4. Меняем цвета, # на %23. Находим атрибуты fill, stroke и меняем код цвета. Меняем # в коде цвета на %23. Если в коде нет fill или stroke, то добавляем атрибут fill="red" или stroke="red". Меняем, "red" на свой цвет. Вместо решётке ставим %23. Для черного цвета: fill="%23000" 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="%23127359"/></svg>');
}
  5. Удаляем width и height (необязательно, мне проще управлять шириной и высотой через отдельные свойства и значения, так легче редактировать и читать код (см. пункт 6). 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="%23127359"/></svg>');
}
  6. Задаём для псевдоэлемента стили: ширину, высоту и отступ справа. Чтобы иконки не деформировались при нехватке места добавим свойство flex-shrink со значением 0. 
    li::before {
    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="%23127359"/></svg>');
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

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

Итоговый код HTML и CSS

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<style>
    ul,
    ol,
    li {
        list-style: none;
    }

    li:not(:last-child) {
        margin-bottom: 8px;
    }

    li {
        display: flex;
        align-items: center;
    }

    li::before {
        content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88333 18.6873 3.825 17.975 2.925 17.075C2.025 16.175 1.31267 15.1167 0.788 13.9C0.262667 12.6833 0 11.3833 0 10C0 8.61667 0.262667 7.31667 0.788 6.1C1.31267 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.31233 6.1 0.787C7.31667 0.262333 8.61667 0 10 0C11.3833 0 12.6833 0.262333 13.9 0.787C15.1167 1.31233 16.175 2.025 17.075 2.925C17.975 3.825 18.6873 4.88333 19.212 6.1C19.7373 7.31667 20 8.61667 20 10C20 11.3833 19.7373 12.6833 19.212 13.9C18.6873 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6873 13.9 19.212C12.6833 19.7373 11.3833 20 10 20Z" fill="%23127359"/></svg>');
        width: 20px;
        height: 20px;
        margin-right: 8px;
        flex-shrink: 0;
    }
</style>

Пример, как будет отображаться код в браузере пользователя:

  • item1
  • item2 чтобы
  • item3 сделать
  • item4 разную длину

4. Другой способ — точное позиционирование через свойство position.

Если нужно более точное позиционирование иконки, то следующий пример для вас. В этом примере иконка будет не в потоке, поэтому придётся высчитать значение для свойства padding-left в ручную. Сложите ширину иконки и отступ между иконкой и текстом.

Если вам не так важна возможность менять цвет иконки через CSS. А важней простота или нужно, например, чтобы менеджер без знания кода сам мог в CMS поменять изображение, то в этом случае иконку лучше вывести через свойство background-image. Поменять иконку можно будет двумя способами: заменив файл с изображением иконки с таким же названием или поменяв путь к изображению.

  1. Добавляем html

    <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

  2. Добавляем css. Когда выводим изображение иконок, ссылаясь на файл, то лучше не вставлять ссылку в свойство content: мы не сможем регулировать размеры иконки. Поэтому добавляем иконку через свойство background-image. Если нужно поменять размеры иконки не забудьте менять одновременно свойства width и height

    Если вы хотите вставить иконку кодом, вместо изображения просто удалите в коде ниже свойства background-image, background-size, background-repeat и их значения. А код иконки вставьте значением для свойства content, как показано выше смотрите пункты с 1 по 5

    ul,
ol,
li {
  list-style: none;
}

li:not(:last-child) {
  margin-bottom: 8px;
}

li {
  position: relative;
  /* тут указываем значение равной ширине иконки + отступ между иконкой и текстом (20px + 8px = 28px) */
  padding-left: 28px;
}

li::before {
  content: "";
  /*не забудьте добавить файл изображение иконки и указать верный адрес до неё */
  background-image: url("/assets/img/thanks.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}

Пример, как будет отображаться код в браузере пользователя:

  • item1
  • item2 чтобы
  • item3 сделать
  • item4 разную длину
На сайте используются файлы cookies, чтобы сделать сайт лучше. Оставаясь на сайте, вы соглашаетесь с политикой конфиденциальности и использованием файлов cookies

Обсудить Ваш сайт

Блок

Это крупный смысловой раздел. Например, данную страницу можно поделить на 7 блоков: шапка сайта, первый экран, кейсы, стоимость, этапы, контакты, подвал сайта.

Если Вы хотите получить примерно такую же страницу, то введите в калькуляторе цифру 7.

Ценообразование многостраничного сайта

На многостраничном сайте есть страницы, которые не сильно отличаются друг от друга: услуги, статьи, кейсы и т.д. Для таких страниц создаётся шаблон. Далее Вы можете самостоятельно создавать шаблонные страницы и редактировать их, используя CMS (систему управления контентом). Стоимость сайта не зависит от количества таких страниц.

Я сверстаю и настрою сайт, так, чтобы Вы меняли контент (текст, изображения) только в одном месте, а он автоматически появлялся везде, где нужно и адаптировался под все разрешения и устройства.

Ценообразование интернет-магазина

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

Страницы товаров и услуг часто являются типовыми (шаблонными). Они различаются названием, описанием, изображением, ценной и т.д. С помощью CMS (системы управления контентом) можно легко добавлять новые товары и редактировать текущие. Если Вы будете сами заполнять характеристики товаров, то количество товаров не влияет на стоимость сайта.

CMS

CMS — это визуально удобный интерфейс, с помощью которого можно добавлять и редактировать содержимое сайта без знания кода.

Спасибо

Я получил заявку и скоро c Вами свяжусь.