Как вставить иконку в input css
Перейти к содержимому

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

  • автор:

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

Ankhena

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

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

DevMan

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

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

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

profesor08

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

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

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

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

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

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

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

Первое новое сообщение • 6 сообщений • Страница 1 из 1

SuBbI Сообщения: 161 Зарегистрирован: 02.01.2010

 

иимеется код поиска,подскажите как есго сверстать картинкой?

  • Непрочитанное сообщение 21 янв 2010, 19:55
  • Цитата

Distructor Администратор Сообщения: 1607 Зарегистрирован: 28.12.2009

 

Естественно отступы надо подгонять под размер картинки лупы и высоту поля ввода

Если же требуется использовать слишком сложное оформление поля, которое проще вставить целой картинкой,
то ставят его фоном, у поля ввода убирают рамку и позиционируют его с помощью отступов в нужном месте

  • Непрочитанное сообщение 21 янв 2010, 20:13
  • Цитата

Как сделать input картинкой

Чтобы сделать input картинкой (например, если у Вас кнопка формы создана тегом , а не ) нужно использовать CSS. Пример:

Скопируй: style=»background-image: url(image.png);».

Здесь в input вставлена строка style=»background-image: url(image.png);». Через background-image и добавляется картинка. После url в скобках нужно указать путь до Вашей картинки.

Чтобы картинка не повторялась смотрите «Как сделать чтобы картинка не повторялась».
Чтобы задать размер картинки смотрите «Как изменить размер картинки».
Чтобы задать позицию изображения смотрите «Background-position в CSS — что это».

Добавить комментарий Отменить ответ

Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK

Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie Duration Description
cookielawinfo-checkbox-analytics 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional 11 months The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary 11 months This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy 11 months The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *