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

Как вставить иконку в 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,443 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.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак

Есть два общих варианта решения данной задачи — использовать некий фреймворк для данной цели и использовать чистый css . Я бы вам советовал пойти по второму пути, так как, скорее всего, если у вас возникают подобные вопросы, вам намного проще в итоге будет использовать уже некие готовые стандартные решения для дизайна, при необходимости изменяемые и / или дополняемые вами, чем писать все с нуля.

Если коротко, то ответ на ваш вопрос гуглится по примерно такому запросу: «bootstrap add icon to input». Если длиннее, то вот первый попавшийся и крайне детальный ответ на английском SO.

При этом, если вы столкнулись с версткой, где используются вещи вроде (насколько я вижу из вашего комментария к другому вопросу), вам наверняка нужен именно Bootstrap — именно в нем подобными стилями привязываются конкретные символы из шрифтов вроде Font Awesome к нужным элементам страницы.

Как добавить иконку в input?

Ankhena

Ладно песочницу не сделали, но хоть бы скрин приложили.
Иконка просто фоном не делается? У неё есть функциональность?

Решения вопроса 2

DevMan

на нормальную песочницу у вас сил не хватило. жаль.

подсказываю один из вариантов:
-> сделать див с инпутом
-> убрать стилизацию с инпута
-> перед/после инпутом поставить иконку
-> весь див стилизовать как инпут

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать

profesor08

profesor08 @profesor08 Куратор тега CSS

Размести, любым удобным способом, блок с иконкой поверх инпута, инпуту задай подходящий отступ со стороны иконки.

Добавить в input иконку

Author24 — интернет-сервис помощи студентам

Я сделал пример, чтобы было понятно! Я часто видел PSD форм у которых в полях есть разные графические элементы. но вот я и не знаю как их добавляют!

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Можно вставить иконку fontawesome в input?
Хочу сделать input с иконкой-ссылкой вот такого типа, но как то все криво((( или лучше будет.

Input type file задать иконку
Как это правильно сделать, чтобы вместо стандартной кнопки была своя иконка?

Как добавить иконку в меню навигации?
Нужна помощь, так как сам к сожалению не смог разобраться ((( Есть навигация горизонтальная, как.

Добавить after после input
Здравствуйте. Хочу добавить after после input с аттрибутом required. input < color: green;.