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

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

  • автор:

Как добавить иконку в 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,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

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

Сможете реализовать за оплату на нашем сайте функционал для кнопки «Поделиться» https://disk.yandex.ru/d/xgwCtR7PlVIcqg как сделано на сайте https://androeed.ru/files/pilgrims-piligrimi.html ? Чтобы при клике на кнопку в ПК-версии сайта появлялось такое окно для пользователей https://disk.yandex.ru/d/9t_5ERHGVoTKFw , а в мобильной версии так https://disk.yandex.ru/i/rkRLfItrceJo6A .

Boswayne | Как вывести иконку в категории? 2
Boswayne
Как вывести иконку в категории?
28-04-2024, 14:50

Я тоже долго мучался настроить эту иконку, так как с DLE никогда не работал.
Помогло:
Перед тегом в файле categorymenu.tpl
вставить

Extazi | Как сделать подсчет катигорий в Фото Extazi

Extazi
Как сделать подсчет катигорий в на статической странице автоматически?
28-04-2024, 02:28
Nimax | Создание простого сайта отзывов (рейтинг . 5

Фото Nimax

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) — модуль PostReviews
25-04-2024, 17:18

Странный вы, это как минимум в ваших интересах т.к модули с рейтингами для комментариев есть и в паблике, поэтому и хочется посмотреть как это реализовано у вас. Стоимость то не низкая для модуля

New-dev.ru | Создание простого сайта отзывов (рейтинг . 5

Фото New-dev.ru

New-dev.ru
Создание простого сайта отзывов (рейтинг и сортировка) — модуль PostReviews
24-04-2024, 14:14

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

Как добавить иконку на задний фон input в Bootstrap

Как добавить иконку на задний фон 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 сайтом проблемы? нужен дополнительный функционал? нестандартный плагин или сверстать новую страницу?
Тогда напишите мне через форму обратной связи, и я постараюсь вам помочь.

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

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