Gunakan Ikon Font Awesome di Placeholder


111

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

Jawaban:


61

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.


4
FontAwesome akan menampilkan karakter biasa untuk semua simbol non unicode. Bagi saya, memasukkan entitas unicode tidak berfungsi, tetapi menempelkan simbol berfungsi: placeholder = " Halo"
DanielKhan

Dengan FontAwesome 5 gunakan font-family: Font Awesome \ 5 Free; sebagai gantinya.
Andrew Schultz

1
@AndrewSchultz, font-family: Font Awesome\ 5 Free;tidak berfungsi. Saya harus menggunakan hanyafont-family: FontAwesome;
kanlukasz

Sebenarnya Anda dapat menerapkan font yang berbeda ke input. Saya melakukan ini pada instalasi dengan FA5 Pro di atasnya & diterapkan font-family: 'Font Awesome 5 Pro', 'Montserrat';ke bidang pencarian & itu bekerja dengan baik.
Jeff W

230

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


8
dari mana Anda mendapatkan &#xF002;nilai? Maksud saya bagaimana Anda pergi dari icon-searchmenjadi &#xF002?
Ігар Цімошка

2
Anda bahkan tidak perlu id="iconified"hanya menambahkan class="fa"dan font mengagumkan akan mengurus css untuk Anda.
Pedro Hoehl Carvalho

8
Aku harus mengubah urutan font untuk membuatnya bekerja: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. Jika tidak, simbol yang mengandung "fl" ditampilkan.
Guillaume Renoult

4
@ ІгарЦімошка Kode hex semuanya ditampilkan di cheatsheet fortawesome.github.io/Font-Awesome/cheatsheet
Liam George Betsworth


20

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 .


Ini juga berfungsi untuk penggunaan input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
FA5

10

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



8

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!

contoh placeholder

placeholder gif


Ini menggunakan Ember 1.7.1
RustyToms

Pos bagus untuk mereka yang menggunakan teknologi web lain.
L84

1
Terimakasih banyak! menggaruk-garuk kepalaku sebentar. terima kasih telah menjelaskan solusinya!
Moe Tsao


4

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


4

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


3

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


3

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>


Ini adalah jawaban untuk Font Awesome 5. Terima kasih!
laviex

1

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

1

Saya menambahkan teks dan ikon bersama di tempat penampung.

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

CSS:

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


1

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;
}
  1. 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"...
  1. 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;
}
  1. 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


0

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>

0

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.