Список преимуществ с иконками (галочками) на HTML и CSS
Напишите по одному пункту в строке. Чтобы добавить заголовок и описание, разделите их знаком |. Выберите иконку, цвета и число столбцов.
Как пользоватьсяПреимущества, понятные с первого взгляда
Доступно на: 
Список преимуществ с иконками (галочками) на HTML и CSS: для чего нужен
Превратите список преимуществ вашего продукта или услуги в список с иконками: галочка, галочка в круге, стрелка, звезда, сердце или молния, с фоновым кружком или без, в один или два столбца и в цвете бренда. У каждого пункта могут быть заголовок и описание, разделённые знаком |.
Иконка берётся из CSS: небольшой SVG используется как маска и закрашивается переменной --cor-icone, поэтому HTML остаётся обычным списком, понятным Google и программам чтения с экрана, а смена иконки у всех пунктов — это правка одной строки.
Как пользоваться
- Напишите пункты, по одному в строке.
- Выберите иконку, столбцы и цвет.
- Скопируйте код на сайт.
Когда использовать
- Раздел преимуществ на главной странице.
- Список того, что входит в тариф.
- Продающая страница услуги.
Частые вопросы
Почему иконка задаётся через CSS?
Потому что так HTML остаётся чистым — обычный список с li, а иконка является украшением: программа чтения с экрана читает только текст пункта, а иконку всех пунктов можно сменить, изменив одну строку CSS.
Как работает иконка без изображения?
У каждого пункта есть ::before с небольшим SVG, используемым как маска (mask-image) и закрашенным выбранным вами цветом. Работает во всех современных браузерах, а цвет меняется через переменную --cor-icone.
Где использовать список преимуществ?
В разделе преимуществ на главной странице, в описании услуги, рядом с ценой тарифа и на продающих страницах. Начинайте каждый пункт с результата для клиента, а не с характеристики.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.