Используйте значок шрифта Awesome в заполнителе

Если вы используете 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="&#xF002; Search" style="font-family:Arial, FontAwesome" />

список шестнадцатеричных кодов можно найти в шрифт Awesome cheatsheet. Однако в последнем FontAwesome 5.0 этот метод не работает (даже если вы используете подход CSS в сочетании с обновленным font-family).

Я решил с помощью этого метода:

в CSS я использовал этот код fontAwesome class:

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

в HTML я добавил fontawesome class и fontawesome icon code внутри местозаполнителя:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Вы можете ознакомиться в CodePen.

где поддерживается, вы можете использовать ::input-placeholder pseudoselector в сочетании с ::before.

Смотрите пример по адресу:

http://codepen.io/JonFabritius/pen/nHeJg

Я просто работал над этим и наткнулся на эту статью, из которой я изменил этот материал:

http://davidwalsh.name/html5-placeholder-css

Я использую Ember (версия 1.7.1), и мне нужно было как привязать значение ввода, так и иметь заполнитель, который был значком FontAwesome. Единственный способ привязать значение в Ember (что я знаю) - это использовать встроенный помощник. Но это приводит к тому, что заполнитель экранируется,"  " просто появляется точно так же, текст.

если вы используете Ember или нет, вам нужно установить CSS заполнителя ввода, чтобы иметь семейство шрифтов FontAwesome. Это SCSS (с помощью Бурбон для стиля заполнителя):

    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="&#xF002;" type="text">

если вы используете Ember привязать заполнитель к свойству контроллера, который имеет значение unicode.

в шаблоне:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

на контроллере:

listFilter: null,
listFilterPlaceholder: "\uf002"

и стоимость обязательных работ ладно!

Я делаю это путем добавления fa-placeholder класс для ввода текста:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

Итак, в css просто добавьте это:

.fa-placholder { font-family: "FontAwesome"; }

это хорошо работает для меня.

обновление:

чтобы изменить шрифт во время ввода текста пользователем, просто добавьте свой шрифт после шрифта awesome

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

использовать placeholder="" в ваш вклад. Вы можете найти Юникод в FontAwesome page http://fontawesome.io/icons/ . Но вы должны убедиться, что добавить style="font-family: FontAwesome;" в ваш вклад.

кто-нибудь интересуется a Шрифт Удивительный 5 реализация:

Не указывайте общее семейство шрифтов" Font Awesome 5", вам нужно специально закончить ветку значков, с которыми вы работаете. Вот я использую филиал "бренды", например.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

более подробно используйте значок шрифта Awesome (5) в тексте заполнителя ввода

есть некоторая небольшая задержка и джанк, как изменения шрифта в ответе, предоставленном Джейсоном. Использование события " change "вместо" keyup " решает эту проблему.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

игнорируя jQuery это можно сделать с помощью ::placeholder входного элемента.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </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] }

ЛУЧШАЯ ЧАСТЬ: Вы можете иметь различное семейство шрифтов для заполнителя и текста

я добавил текст и значок вместе в местозаполнитель.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;