Я пытаюсь вставить значок пользователя в поле ввода имени пользователя.
Я попробовал одно из решений аналогичного вопроса,
зная, что background-image
свойство не будет работать, так как Font Awesome - это шрифт.
Следующее - мой подход, и я не могу получить отображение значка.
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}
У меня есть шрифт face, объявленный в шрифте по умолчанию awesome css, поэтому я не был уверен, что добавление font-family выше было правильным подходом.
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
html
css
fonts
font-awesome
Сон Ли
источник
источник
Ответы:
Ты прав. : before и: after псевдоконтент не предназначен для работы с замененным контентом, таким как
img
иinput
элементы. Добавление оберточного элемента и объявление семейства шрифтов является одной из возможностей, как и использование фонового изображения. Или, возможно, HTML5 заполнитель текста соответствует вашим потребностям:Браузеры, которые не поддерживают атрибут placeholder, просто проигнорируют его.
ОБНОВИТЬ
Прежде , чем селектор контента выбирает вход:
input[type="text"]:before
. Вы должны выбрать обертку:.wrapper:before
. См. Http://jsfiddle.net/allcaps/gA4rx/ . Я также добавил подсказку, где обертка избыточна.Отступать
Font Awesome использует Unicode Private Use Area (PUA) для хранения иконок. Другие символы отсутствуют и возвращаются к браузеру по умолчанию. Это должно быть так же, как любой другой вход. Если вы определяете шрифт для элементов ввода, то предоставьте тот же шрифт, что и в качестве запасного, для ситуаций, когда мы используем значок. Как это:
источник
input { font-family: 'FontAwesome' YourFont; }
. Это помогает? Вы всегда можете задать новый вопрос.Вывод:
HTML:
CSS:
(Или)
Вывод:
HTML:
CSS:
источник
z-index: 1
заставит основной ввод поймать фокус, когда вы нажмете на значок - что-то, что вам может понадобиться, например, при добавлении средства выбора даты.position: relative
(отрицательные поля не нужны) иz-index
(как только элемент отображается после ввода)Вы могли бы использовать обертку. Внутри обёртки добавьте элемент font awesome
i
иinput
элемент.затем установите положение обёртки относительно:
а затем установите
i
абсолютное положение элемента и установите для него правильное место:(Я знаю, что это взлом, но он выполняет свою работу.)
источник
Этот ответ будет работать для вас, если вам нужно выполнить следующие условия (ни один из текущих ответов не соответствует этим условиям):
Я считаю, что 3 - это минимальное количество элементов HTML, удовлетворяющих следующим условиям:
источник
Не нужно много кодировать ... просто выполните следующие шаги:
Вы можете найти ссылки на Unicode ( fontawesome ) здесь ...
FontAwesome Unicode для иконок
источник
источник
Прочитав различные версии этого вопроса и обыскав вокруг, я нашел довольно чистое решение без js. Это похоже на решение @allcaps, но позволяет избежать проблемы с изменением входного шрифта по сравнению с основным шрифтом документа.
Использовать
::input-placeholder
атрибут для особого стиля текста заполнителя. Это позволяет использовать шрифт значка в качестве шрифта-заполнителя, а текст (или другой шрифт) - в качестве фактического входного текста. В настоящее время вам нужно указать специфичные для поставщика селекторы.Это работает хорошо, если вам не нужно сочетание значка и текста в элементе ввода. Если вы это сделаете, то вам придется смириться с тем, что текстовый заполнитель является шрифтом браузера по умолчанию (обычный с засечками на моем языке) для слов.
Например,
HTML
CSS
Скрипка с браузерным префиксом селекторов: http://jsfiddle.net/gA4rx/78/
Обратите внимание, что вы должны определить каждый специфичный для браузера селектор как отдельное правило. Если вы объедините их, браузер проигнорирует это.
источник
font-family
в настоящее время принимают этот селектор. Мы можем только надеяться на более широкое признание в будущем.Я нашел самый простой способ, используя bootstrap 4.
источник
Я добился этого так
Результат выглядит так:
Примечание
Обратите внимание, что я использую Ruby on Rails, поэтому мой полученный код выглядит немного взорванным. Код представления в slim на самом деле очень лаконичен:
источник
Для меня простой способ иметь значок «внутри» ввода текста, не пытаясь использовать псевдоэлементы с удивительным шрифтом Unicode и т. Д., Состоит в том, чтобы вводить текст и значок в элементе оболочки, который мы будем располагать относительно, и затем поместите и поисковый ввод, и шрифт.
То же самое, что мы делаем с фоновыми изображениями и текстом, мы сделали бы здесь. Я чувствую, что это также хорошо для начинающих, так как позиционирование CSS - это то, что новичок должен изучить в начале своего пути кодирования, поэтому код легко понять и использовать повторно.
источник
Опираясь на предложение allcaps. Вот метод фонового шрифта с наименьшим количеством HTML:
источник
Сделайте кликабельный значок для фокусировки внутри элемента ввода текста.
CSS
HTML
Просто добавьте любую понравившуюся вам иконку внутри
<i>
тега из библиотеки Font Awesome и наслаждайтесь результатами.источник
источник
чисто CSS
источник
Мое решение состояло в том, чтобы иметь относительный контейнер
input
для хранения значка. Этот внешний контейнер имеет::after
желаемый значок, расположенныйabsolute
внутри контейнера.HTML:
Код SASS:
источник
Мое решение, чтобы добавить удивительный шрифт значок внутри элемента ввода. Вот простой код для добавления значка внутри элемента ввода. Просто скопируйте код ниже и укажите, куда вы хотите добавить. или если вы хотите изменить значок, просто поместите свой код значка в
<i>
тег.источник
Иногда значок не отображается из-за версии Font Awesome. Для версии 5 css должен быть
источник
Простой способ, но вам нужен бутстрап
источник
источник
Я попробовал следующие вещи, и это действительно хорошо работает HTML
источник
Чтобы решить эту проблему с юникодом или fontawesome, вы должны добавить
span
с ,class
как показано ниже:В HTML:
В CSS:
источник
источник