Инструкции
Как сделать Input с иконкой в форме
1min
Чтобы добавить в Input иконку, выполните следующие действия:
1
Выберите элемент Input. На вкладке Стилей в разделе Фон (Background) нажмите кнопку +.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/cMKq7j1zuZiYUjkwBAwDx_ab-capture-image.png?format=webp)
2
Будет добавлен новый слой фона. Кликните по его значку.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/xQINNrrxufaOodbSmGM_Z_ab-capture-image.png?format=webp)
3
Выберите вкладку Изображение (Image).
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/pbER6iGHetxdFvmpx-p0B_ab-capture-image.png?format=webp)
4
Нажмите кнопку Выбрать изображение (Choose image).
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/9mo2Qu-qYd1uSubv8Nh29_ab-capture-image.png?format=webp)
5
Выберите нужную иконку или загрузите новую.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/xY1-nS9YkBDWLarIO9SyL_image.png?format=webp)
6
Выберите размещение изображения слева по центру.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/ixvMLndZZDDT4XdDO0QyB_ab-capture-image.png?format=webp)
7
При необходимости измените размер изображения в нижней части настроек и закройте окно настроек.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/VQjHs48CEdgiV9IPCb4-k_ab-capture-image.png?format=webp)
8
Для элемента Input увеличьте внутренний отступ слева, чтобы вводимый в поле текст не залезал на иконку.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/adhEvL8Zo1N0Q98oeSOHf_ab-capture-image.png?format=webp)
9
Нажмите на кнопку предварительного просмотра для проверки результата.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Ex4_E6LLFUL6NfEv9GvN4_ab-capture-image.png?format=webp)
10
Предварительный просмотр.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/2WKUEIWvQpHKlf3k1FbZC_image.png?format=webp)
TABLE OF CONTENTS