Tampaknya tidak ada kelas untuk tipe input 'kirim' dalam font-mengagumkan. Apakah mungkin menggunakan beberapa kelas dari font-dahsyat untuk input tombol? Saya telah menambahkan ikon ke semua tombol (yang sebenarnya terhubung dengan kelas 'btn' dari twitter-bootstrap) di aplikasi saya, tetapi tidak dapat menambahkan ikon di 'input type submit'.

Atau, cara menggunakan kode ini:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

<input type="submit" id="image-button">Text</input>

(yang saya ambil dari HTML: Bagaimana cara membuat tombol kirim dengan teks + gambar di dalamnya? ) dengan font-mengagumkan?

gunakan tombol ketik = "kirim" bukan input

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

untuk penggunaan Font Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

HTML

Karena <input>elemen hanya menampilkan nilai atribut nilai, kita harus memanipulasinya saja:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Saya menggunakan entitas di sini, yang sesuai dengan U + F043, simbol 'warna' Font Awesome.

CSS

Maka kita harus menatanya untuk menggunakan font:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Yang akan memberi kita simbol warna di Font Awesome dan teks lainnya di font yang sesuai.

Namun, kontrol ini tidak akan sempurna pixel, jadi Anda mungkin harus men-tweak sendiri.

Anda dapat menggunakan font awesome utf cheatsheet

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

di sini adalah tautan untuk cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

Yah, secara teknis itu tidak mungkin untuk mendapatkan :beforedan :afterelemen semu bekerja pada inputelemen

Dari W3C :

12.1 The: before dan: after pseudo-elements

Penulis menentukan gaya dan lokasi konten yang dihasilkan dengan: sebelum dan: setelah elemen semu. Seperti namanya, elemen-elemen: before dan: after pseudo menentukan lokasi konten sebelum dan sesudah konten hierarki dokumen elemen. Properti 'konten', bersama dengan elemen pseudo ini, menentukan apa yang dimasukkan.

Jadi saya punya proyek di mana saya telah mengirimkan tombol dalam bentuk inputtag dan untuk beberapa alasan pengembang lain membatasi saya untuk menggunakan <button>tag daripada tombol input yang biasa, jadi saya datang dengan solusi lain, yaitu membungkus tombol di dalam spanset untuk position: relative;dan kemudian benar-benar memposisikan ikon menggunakan :afterpseudo.

Catatan: Biola demo menggunakan kode konten untuk FontAwesome 3.2.1 sehingga Anda mungkin perlu mengubah nilai contentproperti.

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

Sekarang di sini semuanya sudah jelas di sini, tentang satu properti yaitu pointer-events: none;, saya telah menggunakan itu karena pada melayang di atas :afterkonten pseudo yang dihasilkan, tombol Anda tidak akan mengklik, jadi gunakan nilai darinone akan memaksa tindakan klik untuk melewati konten itu .

Dari Jaringan Pengembang Mozilla :

Selain menunjukkan bahwa elemen tersebut bukan target kejadian mouse, nilai tidak ada yang menginstruksikan kejadian mouse untuk pergi "melalui" elemen dan menargetkan apa pun yang "di bawah" elemen itu sebagai gantinya.

Arahkan font / ikon hati Demodan lihat apa yang terjadi jika Anda TIDAK menggunakanpointer-events: none;

Anda dapat menggunakan kelas tombol btn-linkdan btn-xsdengan tipe submit, yang akan membuat tombol kecil tak terlihat dengan ikon di dalamnya. Contoh:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Juga mungkin seperti ini

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

Dengan banyak kiriman, ketika Anda membutuhkan nilai kiriman yang dipilih, ini dapat dilakukan dengan cukup mudah. Cukup buat bidang tersembunyi di formulir Anda dan ubah nilainya tergantung pada tombol apa yang diklik. Misalnya, dalam formulir, katakan Anda memiliki:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

Menggunakan jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Kemudian Anda dapat mengambil nilai tombol yang diklik dalam variabel posting "Diklik"