Как вставить иконку в 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,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 к нужным элементам страницы.
Как вставить иконку в окно input
Так понимаю в данном варианте должен сбрасываться весь кеш а не конкретной статьи ? Есть еще такое решение в конфиге nginx добавить:
location ~ /purge(/.*) { fastcgi_cache_purge phpcache "$scheme$request_method$host$1"; > таком случае можно сбросить кеш нужной статьи если пройти по ссылке site.ru/kategorija/purge/3434-ststja.html
Вот только как прикрутить данный вариант если добавляются комментарии, редактируется статья .
raimikmb | Плагин для сброса FastCGI кеша 3
raimikmb
Плагин для сброса FastCGI кеша
Сегодня, 17:16
По логике должен срабатывать сброс если редактировать статью в Ajax окне. Но получаю ошибку:
2024/01/08 17:02:34 [error] 8109#8109: *145 FastCGI sent in stderr: "PHP message: PHP Fatal error: Uncaught Error: Call to undefined function clear_fastcgi_cache() in /home/admin/web/www/public_html/engine/cache/system/plugins/51d2d836d1b2ddf58b46871f190ca471.php:1955 Stack trace: #0 /home/admin/web/www/public_html/engine/ajax/controller.php(195): include_once() #1 {main> thrown in /home/admin/web/www/public_html/engine/cache/system/plugins/51d2d836d1b2ddf58b46871f190ca471.php on line 1955" while reading response header from upstream, client: xx.xx.xx.xx, server: www, request: "POST /engine/ajax/controller.php?mod=editnews HTTP/2.0", upstream: "fastcgi://unix:/var/run/php-www.sock:", host: "www", referrer: "statja.html"New-dev.ru | Модуль по серийного вывода серий 2
New-dev.ru
Модуль по серийного вывода серий
Сегодня, 14:15
Mundo | Доп. поле с выбором вариантов методом Dr . 2
Mundo
Доп. поле с выбором вариантов методом Drag’n’Drop
6-01-2024, 18:34
Создание нового уникального дополнительного поля с названием — Выбор из вариантов.
При создании поля в админпанели добавить возможность создания «Сущности» в неограниченном количестве. Каждая новая созданная «Сущность» это — Загруженое изображение (иконка) + Значение поля.
Дополнительное поле должно поддерживать мультивыбор.
Заполнение данного доп. поля в новости осуществляется методом перетаскивание предварительно созданных для этого доп. поля «Сущностей» методом Drag’n’Drop.
После заполнения доп. поля и сохранения новости информация записывается в базу данных в той же последовательности в которой доп. поле было заполнено. Разделителем для значений выступает запятая «,»
Возможно будет необходимо реализовать совместимость с плагином LAZYDEV DLE xField Tab PRO – группирование дополнительных полей по вкладкам. В случае если это потребуется.
Mundo | Доп. поле с выбором вариантов методом Dr . 2
Mundo
Доп. поле с выбором вариантов методом Drag’n’Drop
6-01-2024, 17:40
Кто может реализовать данный функционал, прошу выйти на связь в комментариях или ПМ, готов достойно заплатить. Помимо этой работы есть еще много другой.
Mundo | Как реализовать метод Drag’n’Drop в доп. . 2
Mundo
Как реализовать метод Drag’n’Drop в доп. полях DLE? Кто возьмётся?
6-01-2024, 15:24
Скорее всего не поняли. Нужно создать новый тип дополнительного поля, заполнение которого будет осуществляться методом драг ен дроп, с предварительно загруженными вариантами ответов (вместо текста иконки или картинки) и возможностью запоминать последовательность выбора.
Как пример в Dle уже есть подобный функционал доп поле тип — список есть хак от лайзидева который добавляет множественный выбор к этому полю. Проблема в том, что варианты ответов списка можно добавлять в виде текста, в моем случае вариантов может быть около 40, потому удобнее былобы сделать это визуально иконками/картинками а ещё лучше сохранить возможность запоминать последовательность выбора.
lutskboy | Как реализовать метод Drag’n’Drop в доп. . 2
lutskboy
Как реализовать метод Drag’n’Drop в доп. полях DLE? Кто возьмётся?
5-01-2024, 20:57
может лучше использовать тип галерея? там массово можно загружать. либо я не понял сути вопроса
TeraMoune | Как сделать редирект с несуществующих ст . 1
TeraMoune
Как сделать редирект с несуществующих страниц пагинации на правильные и существующие?
5-01-2024, 01:50
Этот не редиректит с несуществующей /категория/12/ на /категория/5/
Так и не должно ведь. Оно работает с страницами page
TeraMoune | Launcher 2
TeraMoune
Launcher
4-01-2024, 20:19
Для просмотра содержимого спойлера, перейдите к выбранному событию.
Суть такая как и в wordpress и других устройствах где есть концепция системы плагинов. Везде есть какая-то возможность установки приложений. У системы android это расширение google play, у wordpress это раздел в административной панели cms.
Этот модуль имеет такую же суть, он позволит установить\обновить плагины, узнать о изменениях и тд не покидая своего сайта (раздела администратора) однако надо зарегистрироваться на сайте (домене сервера на котором хостится мой сайт) ссылка на регу будет на странице авторизации в админке (гостевых доступов нету). Но на данный момент я пока не занимаюсь всем этим и это пока в неопределённом состоянии.
P.S. А вот какие плагины и для чего это уже сами выясняйте, я описывать их все тут не стану. Их описание есть конкретно там, и описание, и документация или какая-то инфа и скриншоты, и видео если где-то есть.
Как добавить иконку в input?
Ладно песочницу не сделали, но хоть бы скрин приложили.
Иконка просто фоном не делается? У неё есть функциональность?
Решения вопроса 2
на нормальную песочницу у вас сил не хватило. жаль.
подсказываю один из вариантов:
-> сделать див с инпутом
-> убрать стилизацию с инпута
-> перед/после инпутом поставить иконку
-> весь див стилизовать как инпут
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
profesor08 @profesor08 Куратор тега CSS
Размести, любым удобным способом, блок с иконкой поверх инпута, инпуту задай подходящий отступ со стороны иконки.
Как добавить иконку на задний фон input в Bootstrap
Рассмотрим добавления иконок в элемент input, на примере реализации формы обратного звонка.
Код формы заказа обратного звонка: