Использовать значок Font Awesome в заполнителе

Можно ли использовать значок Font Awesome в заполнителе? Я читал, что HTML нельзя использовать в качестве заполнителя. Есть ли обходной путь?

placeholder="<i class='icon-search'></i>"

Вы не можете добавить значок и текст, потому что вы не можете применить другой шрифт к части заполнителя, однако, если вас устраивает только значок, он может работать. Значки FontAwesome - это просто символы с настраиваемым шрифтом (вы можете посмотреть в шпаргалке FontAwesome экранированный символ Unicode в contentправиле. В меньшем количестве исходного кода он находится в переменных .less) Проблема будет заключаться в том, чтобы поменять местами шрифты, когда ввод не пусто. Скомбинируйте его с jQuery вот так .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </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');
    }
});

Однако переход между шрифтами не будет плавным.

Если вы используете 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" />

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

Я решил этим методом:

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

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

В HTML я добавил класс fontawesome и код значка fontawesome внутри заполнителя:

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

Вы можете увидеть в CodePen .

Ответ @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="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

Для FA5 Pro имя шрифта - Font Awesome 5 Pro.

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

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

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

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

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

Я использую 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="&#xF002;" 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="&#xF002;" />

Итак, в 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="&#xf167">

Подробнее Использование значка Font Awesome (5) во вводимом тексте-заполнителе

Игнорируя 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] }

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

Я знаю, что этот вопрос очень старый. Но я не видел простого ответа, как раньше.

Вам просто нужно добавить fasкласс во входные данные и указать действительный шестнадцатеричный код в этом случае &#xf002для глифа Font-Awesome, как здесь<input type="text" class="fas" placeholder="&#xf002" />

Вы можете найти юникод каждого глифа в официальном Интернете здесь .

Это простой пример, вам не нужны 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="&#xf002" />
  </div>
</form>

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

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

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

placeholder="Edit   "

CSS:

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

Если вы можете / хотите использовать 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-код. Вместо всех этих трудностей с заполнителем мое решение:

1. Установить иконку обычным способом

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;
}

2. Затем настройте текст заполнителя (это личное для всех, в моем случае значок был прямо перед текстом)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Проблема заключается в том, что значок находится над нашим вводом и блокирует курсор для щелчка, поэтому мы должны добавить еще одну строку в наш CSS.

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Но значок не исчезает вместе с заполнителем, поэтому нам нужно это исправить. А также это финальная версия моего решения:

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="&#xf002;" 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>