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

Как вставить иконку в input [дубликат]

Видела подобный вопрос, но ответ дали как вставить изображение. А что на счет иконки, например, с Font Awesome? Вот как здесь: http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44.jpg

Отслеживать
задан 30 авг 2017 в 10:50
767 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 серебряных знака 70 70 бронзовых знаков

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

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

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

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

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

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

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

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

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

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

209 / 209 / 6
Регистрация: 23.10.2011
Сообщений: 971

насколько я знаю , такие формы состоят из бесцветного input’а, обрамленного div’ом в виде рамочки, внутри дива иконка

Эксперт по компьютерным сетям Эксперт NIX

12935 / 7340 / 785
Регистрация: 09.09.2009
Сообщений: 28,711

1 2 3 4 5 6 7

html> body> form> input type=button style="background: url(/images/bgbutton.gif)" value="Кнопка с фоном"> /form> /body> /html>

Регистрация: 10.08.2015
Сообщений: 162

1 2 3 4

div class="input-group margin-bottom-sm"> span class="input-group-addon">i class="fa fa-envelope-o fa-fw">/i>/span> input class="form-control" type="text" placeholder="Email address"> /div>

Регистрация: 13.08.2015
Сообщений: 1

1 2 3 4 5 6 7

input { background-image: url(Ссылка на изображение); background-repeat: no-repeat; /*Убираем повтор изображения*/ background-position: 4px; /*Позиционируем*/ . . /*Стили самой кнопки*/ }

20 / 25 / 12
Регистрация: 26.06.2013
Сообщений: 111

У input делаем слева или справа padding пикселей 40 например.
И на это место position:absolute ставим иконку.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Добавить иконку на кнопку
Есть у меня изображение формата .png. Есть кнопка folderButton = new QPushButton(this); Я.

Добавить иконку в listbox
Здравстуйте! Реально ли добавить иконку в listbox перед названием itema? что-то типа этого .

Добавить иконку приложения
Как в Toolbar добавить значек перед названием приложения? в xml

Добавить иконку в StatusBar
как сделать StatusBar см иконкой?

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

Ankhena

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

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

DevMan

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

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

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

profesor08

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

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