Input icon

css input icon / форма с иконками

Elementor PRO 3.19

плагин Elementor WordPress

Премиум темы и плагины для WordPress

Уроки Elementor

Бесплатно

Input icon

				
					.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 Добавление иконок во второе поле формы

• Аналогичные действия выполняются для второго поля формы, только для него используется уникальный класс.
• После добавления иконок и изменения их положения, необходимо сохранить изменения.
• В конце видео автор призывает зрителей ставить лайки и подписываться на канал.

2022