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

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

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

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

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

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

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

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

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

Добавить в 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’ом в виде рамочки, внутри дива иконка

12944 / 7347 / 787
Регистрация: 09.09.2009
Сообщений: 28,747

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 в Bootstrap

Рассмотрим добавления иконок в элемент input, на примере реализации формы обратного звонка.

Код формы заказа обратного звонка:

 
 
 
Заказать звонок 
  

Форма имеет практически стандартную структуру, за исключением следующего:

Первое, добавили еще один класс к «form-group», а именно — «inner-addon»

Второе, добавили html конструкцию для иконки перед инпутом:

И самое главное что нам нужно, это создать дополнительные стили для класса «inner-addon»:

.inner-addon < position: relative; >.inner-addon .glyphicon < position: absolute; left: 0px; color: #6F727A; padding: 10px; pointer-events: none; >.inner-addon .form-control < padding-left: 35px; >.form-group-lg.inner-addon .glyphicon

Как видите, все довольно просто. Пример реализации, можно найти в этом уроке.

Поделиться в соцсетях:

С вашим WordPress сайтом проблемы? нужен дополнительный функционал? нестандартный плагин или сверстать новую страницу?
Тогда напишите мне через форму обратной связи, и я постараюсь вам помочь.

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

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

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

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