Gunakan Ikon Font Awesome di Placeholder

Apakah mungkin menggunakan Ikon Font Awesome di Placeholder? Saya membaca di mana HTML tidak diperbolehkan di placeholder. Apakah ada solusinya?

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

Anda tidak dapat menambahkan ikon dan teks karena Anda tidak dapat menerapkan font yang berbeda ke bagian placeholder, namun, jika Anda puas hanya dengan sebuah ikon maka itu bisa berfungsi. Ikon FontAwesome hanyalah karakter dengan font khusus (Anda dapat melihat Cheatsheet FontAwesome untuk karakter Unicode yang lolos dalam contentaturan. Dalam kode sumber yang lebih sedikit ditemukan di variabel .less Tantangannya adalah menukar font saat inputnya tidak kosong. Gabungkan dengan jQuery seperti ini .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

Dengan CSS ini:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Dan ini (sederhana) jQuery

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

Namun, transisi antar font tidak akan mulus.

Jika Anda menggunakan FontAwesome 4.7ini sudah cukup:

<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" />

Daftar kode hex dapat ditemukan di cheatsheet Font Awesome . Namun, di FontAwesome 5.0 terbaru, metode ini tidak bekerja (bahkan jika Anda menggunakan pendekatan CSS yang dikombinasikan dengan yang diperbarui font-family).

Saya menyelesaikannya dengan metode ini:

Di CSS saya menggunakan kode ini untuk kelas fontAwesome :

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

Dalam HTML saya telah menambahkan kelas fontawesome dan kode ikon fontawesome di dalam placeholder:

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

Anda bisa lihat di CodePen .

@ Jawaban Elli dapat bekerja di FontAwesome 5, tetapi membutuhkan penggunaan nama font yang benar dan menggunakan CSS khusus untuk versi yang Anda inginkan. Misalnya saat menggunakan FA5 Free, saya tidak dapat membuatnya berfungsi jika saya menyertakan all.css, tetapi berfungsi dengan baik jika saya menyertakan 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'" />

Untuk FA5 Pro, nama fontnya adalah 'Font Awesome 5 Pro'

Jika didukung, Anda dapat menggunakan ::input-placeholderpseudoselector yang digabungkan dengan ::before.

Lihat contoh di:

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

Saya baru saja mengerjakan ini dan menemukan artikel ini, dari mana saya memodifikasi hal-hal ini:

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

Saya menggunakan Ember (versi 1.7.1) dan saya perlu mengikat nilai input dan memiliki placeholder yang merupakan ikon FontAwesome. Satu-satunya cara untuk mengikat nilai di Ember (yang saya tahu) adalah dengan menggunakan helper bawaan. Tapi itu menyebabkan placeholder di-escape, "& # xF002" muncul begitu saja, teks.

Jika Anda menggunakan Ember atau tidak, Anda perlu mengatur CSS placeholder input untuk memiliki font-family FontAwesome. Ini adalah SCSS (menggunakan Bourbon untuk gaya placeholder ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Jika Anda hanya menggunakan setang, seperti yang telah disebutkan sebelumnya, Anda dapat mengatur entitas html sebagai placeholder:

<input id="listFilter" placeholder="&#xF002;" type="text">

Jika Anda menggunakan Ember mengikat placeholder ke properti pengontrol yang memiliki nilai unicode.

di dalam template:

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

pada pengontrol:

listFilter: null,
listFilterPlaceholder: "\uf002"

Dan pengikatan nilai berfungsi dengan baik!

Gunakan placeholder=""masukan Anda. Anda dapat menemukan unicode di halaman FontAwesome http://fontawesome.io/icons/ . Tetapi Anda harus memastikan menambahkan style="font-family: FontAwesome;"masukan Anda.

Saya melakukan ini dengan menambahkan fa-placeholderkelas ke teks masukan:

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

jadi, di css tambahkan saja ini:

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

Ini bekerja dengan baik untuk saya.

Memperbarui:

Untuk mengubah font saat pengguna mengetik di input teks Anda, cukup tambahkan font Anda setelah font mengagumkan

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

Siapa pun yang bertanya-tanya tentang implementasi Font Awesome 5 :

Jangan tentukan keluarga fonta "Font Awesome 5", Anda harus secara khusus mengakhirinya dengan cabang ikon yang Anda gunakan. Di sini saya menggunakan cabang "Merek" misalnya.

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

Lebih detail Gunakan ikon Font Awesome (5) dalam memasukkan teks placeholder

Mengabaikan jQuery, ini dapat dilakukan dengan menggunakan ::placeholderelemen input.

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

Bagian 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] }

BAGIAN TERBAIK: Anda dapat memiliki jenis font yang berbeda untuk placeholder dan teks

Saya tahu pertanyaan ini sudah sangat tua. Tetapi saya tidak melihat jawaban sederhana seperti yang biasa saya gunakan.

Anda hanya perlu menambahkan faskelas ke input dan memasukkan hex yang valid dalam kasus ini &#xf002untuk mesin terbang Font-Awesome seperti di sini<input type="text" class="fas" placeholder="&#xf002" />

Anda dapat menemukan unicode dari setiap mesin terbang di web resmi di sini .

Ini adalah contoh sederhana Anda tidak memerlukan css atau 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>

Ada sedikit penundaan dan jank saat font berubah dalam jawaban yang diberikan oleh Jason. Menggunakan acara "ubah" alih-alih "keyup" menyelesaikan masalah ini.

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

Saya menambahkan teks dan ikon bersama di tempat penampung.

placeholder="Edit   "

CSS:

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

Jika Anda dapat / ingin menggunakan Bootstrap, solusinya adalah grup input:

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

Tampak seperti ini: masukan dengan teks-di depan dan simbol pencarian

Saya telah memecahkan masalah sedikit berbeda dan berfungsi dengan ikon FA apa pun melalui kode html. Alih-alih semua kesulitan ini dengan placeholder, solusi saya adalah:

1. Untuk menempatkan ikon dengan cara biasa

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. Kemudian sesuaikan teks placeholder (bersifat pribadi untuk semua orang, dalam kasus saya ikon berada tepat sebelum teks)

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

3. Ini adalah masalah bahwa ikon berada di atas input kita dan memblokir kursor untuk diklik jadi kita harus menambahkan satu baris lagi di CSS kita

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

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

4. Namun ikon tidak menghilang bersama dengan placeholder jadi kita perlu memperbaikinya. Dan ini juga versi terakhir dari solusi saya:

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

Ini lebih sulit dari yang saya pikirkan sebelumnya, tetapi saya harap saya telah membantu siapa pun dengan ini.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

Solusi Teocci sesederhana mungkin, jadi, tidak perlu menambahkan CSS apa pun, cukup tambahkan class = "fas" untuk Font Awesome 5, karena ini menambahkan deklarasi font CSS yang tepat ke elemen.

Berikut adalah contoh kotak pencarian di dalam bilah navigasi Bootstrap, dengan ikon pencarian ditambahkan ke grup masukan dan placeholder (demi demontrasi, tentu saja, tidak ada yang akan menggunakan keduanya secara bersamaan). Gambar: https://i.imgur.com/v4kQJ77.png "> Kode:

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

Terkadang di atas semua jawaban tidak terbangun, ketika Anda dapat menggunakan trik di bawah ini

.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>