Ответы:
Вы не можете добавить значок и текст, потому что вы не можете применить другой шрифт к части заполнителя, однако, если вас устраивает только значок, он может работать. Значки FontAwesome - это просто символы с настраиваемым шрифтом (вы можете посмотреть в шпаргалке FontAwesome экранированный символ Unicode в content
правиле. В меньшем количестве исходного кода он находится в переменных .less) Проблема будет заключаться в том, чтобы поменять местами шрифты, когда ввод не пусто. Скомбинируйте его с jQuery вот так .
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
С помощью этого CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
И этот (простой) jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
Однако переход между шрифтами не будет плавным.
font-family: Font Awesome\ 5 Free;
не работает. Я должен был использовать только чтоfont-family: FontAwesome;
font-family: 'Font Awesome 5 Pro', 'Montserrat';
к полю поиска, и это сработало.
Если вы используете FontAwesome 4.7
этого, должно быть достаточно:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
Список шестнадцатеричных кодов можно найти в шпаргалке Font Awesome . Однако в последней версии FontAwesome 5.0 этот метод не работает (даже если вы используете подход CSS в сочетании с обновленным font-family
).

ценность? Я имею в виду, как вы переходите от icon-search
к 
?
id="iconified"
просто добавить, class="fa"
и font awesome позаботится о css за вас.
<input type="text" placeholder=" Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">
. В противном случае отображался символ, содержащий «fl».
Я решил этим методом:
В CSS я использовал этот код для класса fontAwesome :
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
В HTML я добавил класс fontawesome и код значка fontawesome внутри заполнителя:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
Вы можете увидеть в CodePen .
input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
Ответ @Elli может работать в FontAwesome 5, но для этого требуется использовать правильное имя шрифта и использовать определенный CSS для нужной версии. Например, при использовании FA5 Free я не мог заставить его работать, если бы я включил all.css, но он работал нормально, если бы я включил solid.css:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
Для FA5 Pro имя шрифта - Font Awesome 5 Pro.
Если поддерживается, вы можете использовать ::input-placeholder
псевдоселектор в сочетании с ::before
.
См. Пример по адресу:
http://codepen.io/JonFabritius/pen/nHeJg
Я как раз работал над этим и наткнулся на эту статью, из которой я изменил это:
Я использую Ember (версия 1.7.1), и мне нужно было привязать значение ввода и иметь заполнитель, который был значком FontAwesome. Единственный способ привязать значение в Ember (о котором я знаю) - это использовать встроенный помощник. Но это приводит к экранированию заполнителя, "& # xF002" просто появляется как текст.
Если вы используете Ember или нет, вам необходимо установить CSS-заполнитель ввода, чтобы иметь семейство шрифтов FontAwesome. Это SCSS (с использованием Bourbon для стилизации заполнителя ):
input {
width:96%;
margin:5px 2%;
padding:0 8px;
border:1px solid #444;
border-radius: 14px;
background: #fff;
@include placeholder {
font-family: 'FontAwesome', $gotham;
}
}
Если вы просто используете ручки, как уже упоминалось ранее, вы можете просто установить объект html в качестве заполнителя:
<input id="listFilter" placeholder="" type="text">
Если вы используете Ember, привяжите заполнитель к свойству контроллера, имеющему значение Unicode.
в шаблоне:
{{text-field
id="listFilter"
placeholder=listFilterPlaceholder
value=listFilter}}
на контроллере:
listFilter: null,
listFilterPlaceholder: "\uf002"
И привязка значений работает нормально!
Используйте placeholder=""
в своем вводе. Вы можете найти юникод на странице FontAwesome http://fontawesome.io/icons/ . Но вы должны обязательно добавить style="font-family: FontAwesome;"
свой вклад.
Я делаю это, добавляя fa-placeholder
класс во вводимый текст:
<input type="text" name="search" class="form-control" placeholder="" />
Итак, в css просто добавьте это:
.fa-placholder {
font-family: "FontAwesome"; }
У меня это хорошо работает.
Обновить:
Чтобы изменить шрифт, когда пользователь вводит текст, просто добавьте свой шрифт после font awesome
.fa-placholder {
font-family: "FontAwesome", "Source Sans Pro"; }
Всем, кто интересуется реализацией Font Awesome 5 :
Не указывайте общее семейство шрифтов «Font Awesome 5», вам нужно в конце концов указать ветвь значков, с которой вы работаете. Вот, например, я использую ветку «Бренды».
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
Подробнее Использование значка Font Awesome (5) во вводимом тексте-заполнителе
Игнорируя jQuery, это можно сделать с ::placeholder
помощью элемента ввода.
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</div>
</form>
Часть css
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }
input.name{ font-family:[font family you want to specify] }
ЛУЧШАЯ ЧАСТЬ: у вас может быть разное семейство шрифтов для заполнителя и текста
Я знаю, что этот вопрос очень старый. Но я не видел простого ответа, как раньше.
Вам просто нужно добавить fas
класс во входные данные и указать действительный шестнадцатеричный код в этом случае 
для глифа Font-Awesome, как здесь<input type="text" class="fas" placeholder="" />
Вы можете найти юникод каждого глифа в официальном Интернете здесь .
Это простой пример, вам не нужны css или javascript.
input {
padding: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
<div class="form-group">
<input type="text" class="fas" placeholder="" />
</div>
</form>
При изменении шрифта в ответе Джейсона наблюдается небольшая задержка и рывки. Использование события «change» вместо «keyup» решает эту проблему.
$('#iconified').on('change', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
Если вы можете / хотите использовать Bootstrap, решением будут группы ввода:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="-">
</div>
Выглядит примерно так: ввод с добавлением текста и символом поиска
Я решил проблему немного по-другому и он работает с любым значком FA через html-код. Вместо всех этих трудностей с заполнителем мое решение:
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">
CSS
.block__icon {
position: absolute;
margin: some-corrections;
}
.block__input {
padding: some-corrections;
}
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder=" Some text">
CSS
.block__icon {
position: absolute;
z-index: 2; /* New line */
margin: some-corrections;
}
.block__input {
position: relative; /* New line */
z-index: 2; /* New line */
padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
z-index: 1;
}
Это сложнее, чем я думал раньше, но надеюсь, что помог кому-нибудь с этим.
Codepen: https://codepen.io/dzakh/pen/YzKqJvy
Решение Teocci настолько простое, насколько это возможно, поэтому нет необходимости добавлять какой-либо CSS, просто добавьте class = "fas" для Font Awesome 5, так как он добавляет правильное объявление шрифта CSS в элемент.
Вот пример поля поиска в навигационной панели Bootstrap, со значком поиска, добавленным как к группе ввода, так и к заполнителю (для демонстрации, конечно, никто не будет использовать оба одновременно). Изображение: https://i.imgur.com/v4kQJ77.png "> Код:
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control fas text-right" placeholder="" aria-label="Search string">
<div class="input-group-append">
<button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
</div>
</div>
</form>
Иногда, прежде всего, отвечайте, не просыпаясь, когда вы можете использовать трюк ниже
.form-group {
position: relative;
}
input {
padding-left: 1rem;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>