css input icon / форма с иконками
плагин Elementor WordPress
.elementor-field-group-name:before {
content: '';
background: url(/wp-content/uploads/2024/02/user.svg);
width: 20px;
height: 20px;
position: absolute;
bottom: 10px;
left:15px;
}
.elementor-field-group-name input {
padding-left: 40px;
}
.elementor-field-group-field_c5cc0f1:before {
content: '';
background: url(/wp-content/uploads/2024/02/call.svg);
width: 20px;
height: 20px;
position: absolute;
bottom: 10px;
left:15px;
}
.elementor-field-group-field_c5cc0f1 input {
padding-left: 40px;
}
Input icon / Форма с иконками
00:01 Добавление иконок в поля формы
• В видео рассказывается о том, как добавить иконки в поля формы.
• Сначала выбирается первый элемент, в котором находится поле «имя», затем берется его класс и добавляется псевдоэлемент с иконкой.
• Иконка должна быть загружена заранее, а ее размеры должны быть указаны в пикселях.
• Далее необходимо задать абсолютное позиционирование и сдвинуть иконку примерно на 10 и 15 пикселей влево и вправо.
02:04 Добавление иконок во второе поле формы
• Аналогичные действия выполняются для второго поля формы, только для него используется уникальный класс.
• После добавления иконок и изменения их положения, необходимо сохранить изменения.
• В конце видео автор призывает зрителей ставить лайки и подписываться на канал.