Bagaimana cara menambahkan ikon Font Awesome ke kolom input?

Bagaimana cara menggunakan ikon pencarian yang disertakan dalam Font Awesome untuk input? Saya memiliki fitur pencarian di situs saya (berdasarkan PHPmotion), yang ingin saya gunakan untuk pencarian.

Berikut kodenya:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Anda dapat menggunakan tag lain sebagai pengganti inputdan menerapkan FontAwesome dengan cara biasa.

alih-alih inputdengan tipe imageAnda, Anda dapat menggunakan ini:

<i class="icon-search icon-2x"></i>

CSS cepat :

.icon-search {
    color:white;
    background-color:black;
}

Ini biola cepatnya: DEMO

Anda dapat menatanya sedikit lebih baik dan menambahkan fungsionalitas acara, ke objek i, yang dapat Anda lakukan dengan menggunakan <button type="submit">objek alih-alih i, atau dengan javascript.

Solusi tombol akan menjadi seperti ini:

<button type="submit" class="icon-search icon-large"></button>

Dan CSS :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

ini biola saya diperbarui dengan tombol alih-alih i: DEMO

Pembaruan: Menggunakan FontAwesome di sembarang tag

Masalah dengan FontAwsome adalah bahwa stylesheetnya menggunakan :beforepseudo-elemen untuk menambahkan ikon ke sebuah elemen - dan elemen semu tidak berfungsi / tidak diizinkan pada inputelemen. Inilah sebabnya mengapa menggunakan FontAwesome dengan cara biasa tidak akan berhasil input.

Tetapi ada solusinya - Anda dapat menggunakan FontAwesome sebagai font biasa seperti:

CSS:

input[type="submit"] {
    font-family: FontAwesome;
}

HTML:

<input type="submit" class="search" value="&#xf002;" />

Mesin terbang bisa dilewatkan sebagai nilai valueatribut. Kode ascii untuk huruf individu / ikon dapat ditemukan dalam file css FontAwesome, Anda hanya perlu mengubah mereka menjadi beberapa HTML ascii seperti \f002untuk dan harus bekerja.

Tautan ke kode ascii FontAwesome ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

Ukuran ikon dapat dengan mudah disesuaikan melalui font-size.

Lihat contoh di atas menggunakan inputelemen di jsfidde:

DEMO

Perbarui: FontAwesome 5

Dengan FontAwesome versi 5, CSS yang diperlukan untuk solusi ini telah berubah - nama keluarga font telah berubah dan bobot font harus ditentukan:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

Lihat komentar @WillFastie dengan link ke fiddle terbaru di bawah. Terima kasih!

Berikut adalah solusi yang berfungsi dengan CSS sederhana dan sintaks font standar yang mengagumkan, tidak perlu nilai unicode, dll.

1. Buat <input>tag diikuti dengan <i>tag standar dengan ikon yang Anda butuhkan.

2. Gunakan pemosisian relatif bersama dengan urutan lapisan yang lebih tinggi (indeks-z) dan gerakkan ikon di atas dan di atas bidang masukan.

3. (Opsional) Anda dapat mengaktifkan ikon, mungkin mengirimkan data, melalui JS standar.

Lihat tiga cuplikan kode di bawah ini untuk HTML / CSS / JS.

Atau sama di JSFiddle disini: Contoh: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Bagi mereka yang bertanya-tanya bagaimana cara mendapatkan ikon FontAwesome ke drupal input, Anda harus decode_entities dulu seperti ini:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);

Ubah masukan Anda menjadi elemen tombol dan Anda dapat menggunakan kelas Font Awesome di atasnya. Penjajaran mesin terbang tidak bagus di demo, tetapi Anda mendapatkan ide:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

Keuntungannya di sini adalah bahwa formulir masih berfungsi penuh tanpa harus menambahkan penangan kejadian untuk elemen yang bukan tombol tetapi terlihat seperti tombol.

Mirip dengan jawaban teratas, saya menggunakan karakter unicode di value = section dari HTML dan memanggil FontAwesome sebagai keluarga font pada elemen input tersebut. Satu-satunya hal yang akan saya tambahkan bahwa jawaban teratas tidak mencakup adalah karena elemen nilai saya juga memiliki teks di dalamnya setelah ikon, mengubah jenis font menjadi FontAwesome membuat teks biasa terlihat buruk. Solusinya cukup dengan mengubah CSS untuk menyertakan font fallback:

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

Dengan cara ini, FontAwesome akan mengambil ikon, tetapi semua teks non-ikon akan menerapkan font yang diinginkan.

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

cara sederhana untuk font baru yang mengagumkan

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

untuk mengerjakan ini dengan unicode atau fontawesome, Anda harus menambahkan span dengan class seperti di bawah ini, karena tag input tidak mendukung class pseudo seperti: after. ini bukan solusi langsung

dalam html:

   <span class="button1 search"></span>
<input name="username">

di css:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;   

}