Иконки в описании карточек товаров и услуг

Добавляем иконки в текст описаний карточек
Пример работы скрипта
100 Ideas that Changed
  • Дата: 24 сентября 2022
  • Время: 20:00
  • Место: Москва, Парк Горького
How to Be a Graphic
  • Дата: 24 сентября 2022
  • Время: 20:00
  • Место: Москва, Парк Горького
Critical Writings on Graphic
  • Дата: 24 сентября 2022
  • Время: 20:00
  • Место: Москва, Парк Горького
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу любой блок с карточками, и добавьте ему класс uc-desc-icons
    Стиль будет работать со всеми блоками карточек, в которых есть поле описания с классом .t-descr
  • 2
    Скопируйте стиль на страницу в HTML-блок (или в общие стили сайта в настройках) и пропишите в стилях ссылки на свои иконки, в соответствующих строках
    Чтобы получить ссылку на иконку — залейте ее в любой блок Тильды, правой кнопкой скопируйте ссылку на изображение, и скройте этот блок
  • 3
    Сделайте списки свойств в описаниях карточек
    Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт
<style>
.uc-desc-icons .t-descr ul{
    list-style-type:none !important;
    padding-left:0 !important;
}
.uc-desc-icons .t-descr ul li{
    padding-left:30px;
    line-height:20px;
    margin-bottom:10px;
}
/* Иконка для первой строчки + общие настройки размера и расположения */
.uc-desc-icons .t-descr ul li:before{
    content:'';
    width:20px;
    height:20px;
    display:inline-block;
    background:url(https://static.tildacdn.com/lib/tildaicon/62653566-3061-4637-a138-383961303030/Layer_20.svg);
    background-size:contain;
    background-position:center center;
    position:absolute;
    margin-left:-30px;
}
/* Иконка для второй строчки */
.uc-desc-icons .t-descr ul li + li:before{
    background:url(https://static.tildacdn.com/lib/tildaicon/35333563-6232-4131-a562-663033373163/8yo_hours.svg);
}
/* Иконка для третьей строчки */
.uc-desc-icons .t-descr ul li + li + li:before{
    background:url(https://static.tildacdn.com/lib/tildaicon/39323534-6530-4531-a161-353364616636/education_location.svg);
}
/* Инструкция по работе со стилем https://trilda.ru/kak-dobavit-ikonki-v-opisaniya-kartochek */
</style>
Вопросы и комментарии
Made on
Tilda