Как вставить иконку в 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?
Ладно песочницу не сделали, но хоть бы скрин приложили.
Иконка просто фоном не делается? У неё есть функциональность?
Решения вопроса 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;.
Как поместить иконку в input
Сообщений: 621
Как вывести иконку в input?
Подскажите пожалуйста, почему у меня не выводится иконка в imput? Вроде, все делаю как на видео: https://www.youtube.com/watch?v=Z7FE. h6rY04&index=5
Изображения
search.png (10.9 Кб, 121 просмотров) |
test.rar (2.4 Кб, 9 просмотров) |
Последний раз редактировалось Женя32; 01.10.2016 в 12:05 .
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как из библиотеки в которой описан класс окна и указана иконка вывести эту иконку в окне которое создается в основном файле? | Gengarww | Win Api | 8 | 07.10.2012 17:46 |
Как поместить иконку в ToolButton | Angel86rus | Общие вопросы Delphi | 3 | 12.06.2010 17:00 |
как вставить иконку на сайт?? | Илюха | HTML и CSS | 1 | 29.04.2008 13:55 |