Использовать шрифт Awesome Icon в Placeholder

Можно ли использовать Font Awesome Icon в Placeholder? Я читаю, где HTML не разрешен в заполнителе. Есть ли способ обхода?

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

ОТВЕТЫ

Ответ 1

Вы не можете добавить значок и текст, потому что вы не можете применить другой шрифт к части заполнителя, однако, если вас устраивает только значок, он может работать. Значки FontAwesome - это просто символы с пользовательским шрифтом (вы можете посмотреть файл FontAwesome.css для экранированного символа Юникод в правиле content. В меньшем количестве исходного кода он находится в variables.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');
    }
});

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

Ответ 2

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

Ответ 3

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

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

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

В HTML я добавил в placeholder fontawesome class и fontawesome icon code:

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

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

Ответ 4

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

См. пример:

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

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

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

Ответ 5

Я использую 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, привяжите placeholder к свойству контроллера, имеющему значение unicode.

в шаблоне:

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

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

listFilter: null,
listFilterPlaceholder: "\uf002"

И привязка значений отлично работает!

placeholder example

placeholder gif

Ответ 6

Использовать placeholder="&#xF002;" в вашем входе. Вы можете найти юникод на странице FontAwesome http://fontawesome.io/icons/. Но вы должны убедиться, что добавили style="font-family: FontAwesome;" в вашем входе.

Ответ 7

Я делаю это, добавляя класс fa-placeholder для ввода текста:

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

поэтому в css просто добавьте это:

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

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

Update:

Чтобы изменить шрифт, когда пользователь вводит текст, просто добавьте шрифт после удивительного шрифта

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

Ответ 8

Любой, кто интересуется реализацией Font Awesome 5:

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

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

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

Ответ 9

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

Ответ 10

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

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

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

Это простой пример, вам не нужны 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>

Ответ 11

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

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

Ответ 12

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

placeholder="Edit &nbsp; &#xf040;"

CSS:

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

Ответ 13

Если вы можете/хотите использовать 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>

Выглядит примерно так: ввод с префиксом текста и символом поиска

Ответ 14

Ответ @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'" />

Ответ 15

Teocci solution настолько прост, насколько это возможно, поэтому не нужно добавлять 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>

Ответ 16

Я решил проблему немного по-другому, и она работает с любой иконкой 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;
}
  1. Затем настройте текст-заполнитель (это персонально для всех, в моем случае значок был непосредственно перед текстом)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...
  1. Вот проблема в том, что значок находится над нашим вводом и блокирует курсор, чтобы щелкнуть, поэтому мы должны добавить еще одну строку в нашем CSS
CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}
  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;
  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;
}

Это сложнее, чем я думал прежде, но я надеюсь, что помог кому-нибудь с этим.