Как вставить иконку в окно input

Запросы лучше кешировать скорее всего ключом основанном на значении $row[‘name’] для обеспечения их уникальности для каждого пользователя.
rewenas | Как добавить функцию в простенький хак? 2

rewenas
Как добавить функцию в простенький хак?
16-01-2024, 00:26
rewenas | Как добавить функцию в простенький хак? 2

rewenas
Как добавить функцию в простенький хак?
15-01-2024, 23:36
Тут уже без доп. запросов не обойтись. Надо делать выборку из таблиц dle_comment_rating_log и dle_logs
Как вставить иконку в input [дубликат]
Видела подобный вопрос, но ответ дали как вставить изображение. А что на счет иконки, например, с Font Awesome? Вот как здесь: http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44.jpg
Отслеживать
задан 30 авг 2017 в 10:50
777 1 1 золотой знак 8 8 серебряных знаков 28 28 бронзовых знаков
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Font Awesome можно использовать например так:
input < height: 20px; >i.fa < width: 26px; height: 26px; line-height: 26px; text-align: center; margin-right: -26px; position: relative; z-index: 1; float: left; >i.fa + input
Отслеживать
ответ дан 30 авг 2017 в 11:06
Artem Gorlachev Artem Gorlachev
4,425 8 8 серебряных знаков 17 17 бронзовых знаков
@import "http://fonts.fontstorage.com/import/adventpro.css"; * < margin: 0; padding: 0; >html, body < width: 100%; height: 100%; background-color: #065b79; overflow: auto; >input < position: absolute; top: 100px; left: 100px; height: 50px; width: 400px; padding-left:55px; background-color: transparent; background-image: url(https://png.icons8.com/windows/50/0063B1/edit); background-repeat: no-repeat; outline: none; color: #fff; text-align: left; font-size: 35px; font-family: 'Advent'; border: 0; border-bottom: .1px solid #fff; >input::placeholder
Отслеживать
ответ дан 30 авг 2017 в 12:10
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
Есть два общих варианта решения данной задачи — использовать некий фреймворк для данной цели и использовать чистый css . Я бы вам советовал пойти по второму пути, так как, скорее всего, если у вас возникают подобные вопросы, вам намного проще в итоге будет использовать уже некие готовые стандартные решения для дизайна, при необходимости изменяемые и / или дополняемые вами, чем писать все с нуля.
Если коротко, то ответ на ваш вопрос гуглится по примерно такому запросу: «bootstrap add icon to input». Если длиннее, то вот первый попавшийся и крайне детальный ответ на английском SO.
При этом, если вы столкнулись с версткой, где используются вещи вроде (насколько я вижу из вашего комментария к другому вопросу), вам наверняка нужен именно Bootstrap — именно в нем подобными стилями привязываются конкретные символы из шрифтов вроде Font Awesome к нужным элементам страницы.
Как вставить иконку в placeholder?

Как можно поместить иконку в placeholder?
- Вопрос задан более двух лет назад
- 2299 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Как добавить иконку в input, чтобы она не перекрывала текст и placeholder?
Результат, которого я хочу добиться:
Нагуглил только то, что можно вставить иконку в инпут в качестве фона, но тогда она перекрывается с вводом и плейсхолдером, вот так:
Наведите, пожалуйста, на истинный путь
- Вопрос задан более трёх лет назад
- 365 просмотров
1 комментарий
Простой 1 комментарий