Використовуйте піктограму Awesome Font у заповнювачі

Чи можна використовувати піктограму Awesome Font у заповнювачі? Я читаю, де HTML не дозволений у заповнювачі. Чи існує рішення?

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

Ви не можете додати піктограму та текст, оскільки ви не можете застосувати інший шрифт до частини заповнювача, однак, якщо вас влаштовує лише значок, він може працювати. Піктограми FontAwesome - це лише символи зі спеціальним шрифтом (ви можете подивитися на шаблоні FontAwesome для втеченого символу Unicode у contentправилі. У меншому розмірі вихідного коду він знаходиться у змінних . Без виклику виклик буде поміняти шрифти, коли вхід є не виливати. Об'єднайте його з 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" />

Перелік шістнадцяткових кодів можна знайти в шаблоні шрифтів 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 .

@ Відповідь Еллі може працювати у 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 назва шрифту - "Шрифт Awesome 5 Pro"

Якщо це підтримується, ви можете використовувати ::input-placeholderпсевдоселектор у поєднанні з ::before.

Дивіться приклад за адресою:

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

Я тільки працював над цим і натрапив на цю статтю, з якої я змінив цей матеріал:

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

Я використовую Ember (версія 1.7.1), і мені потрібно було прив’язати значення вводу та мати заповнювач, який був значком FontAwesome. Єдиний спосіб прив’язати значення в Ембер (про що я знаю) - це використовувати вбудований помічник. Але це призводить до уникнення заповнювача, "& # 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=""у своєму введенні. Ви можете знайти unicode на сторінці 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"; }

Це добре працює для мене.

Оновлення:

Щоб змінити шрифт під час введення тексту користувача у текстовому введенні, просто додайте шрифт після приголомшливого шрифту

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

Усі, хто цікавиться питанням про реалізацію шрифту Awesome 5 :

Не вказуйте загальну сімейство шрифтів "Шрифт 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>

Виникає незначна затримка і дзижчання, коли шрифт змінюється у відповіді, наданій Джейсоном. Використання події "зміни" замість "клавіатури" вирішує цю проблему.

$('#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>