Mengagumkan, tipe masukan 'kirim'


205

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?

Jawaban:


345

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>

Luar biasa! Bekerja seperti yang diharapkan. Masih memerlukan beberapa langkah untuk mengadaptasi ini untuk simple_form atau membuat helper, tetapi itu relatif mudah.
denis.peplin

19
Perhatikan juga perbedaan antara <button type=submit>dan <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo

@ stanislav-mayorov itu berhasil. Jika Anda menggunakan versi 4.7 saat ini Anda harus menyesuaikan dari 3.2.0 (dari 2012). Coba jawaban yang diperbarui.
Joao Leme

@ JoLoLeme tidak <button type="submit">berfungsi dalam bentuk apa pun?
Ryuujo

Ini tidak berfungsi ketika saya ingin menghindari memuat ulang halaman.
Penyelamat

87

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 &#xf043;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.


1
Terima kasih atas jawaban, ini berhasil, tetapi saya tidak dapat menggunakan pendekatan ini, karena font mempengaruhi teks seluruh nilai. Saya juga menggunakan 'ikon-besar' di tombol lain ... Bagi mereka yang akan mencoba ini, kode font ada di sini: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin

Saya pikir hanya itu yang bisa kita lakukan di sini. Secara pribadi saya menyarankan Anda untuk meninggalkan <input>ikon sw / o.
Pavlo

bekerja dengan baik, saya harus menggunakan <input type = "submit"> karena saya punya dua submit dalam satu bentuk
MuniR

ini lebih baik daripada menambahkan "fa" ke kelas elemen, karena "fa" akan mengubah tinggi elemen.
Siwei Shen 申思维

Anda juga dapat menggunakan font-familyproperti gaya sebaris untuk menggunakannya dalam elemen HTML apa pun yang memiliki konten teks.
SaidbakR

54

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/


2
Ini membuat hariku! Terima kasih .. Untuk pengguna lain, harap perhatikan kalimatnya: salin dan tempel ikon ( bukan unicode ) langsung dari halaman ini ke dalam desain Anda yaitu salin ikon yang sebenarnya dan itu akan berfungsi
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>tanpa bootstrap, gunakan kelas fa untuk membuatnya bekerja
StackHola

2
Jika Anda mencoba mengatur ini dengan javascript atau jQuery, gunakan variasi unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong

2
Bahkan dengan Bootstrap saya perlu menambahkan class = "fa" untuk membuatnya bekerja.
denis.peplin

12

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;


1
Walaupun solusi yang sangat keren ini memiliki satu kelemahan besar: pointer-events: tidak ada yang tidak didukung oleh IE <11 ( caniuse.com/#feat=pointer-events ). Alasannya adalah bahwa properti pointer-events dibuat untuk elemen SVG (grafik vektor) dan itu tidak secara teknis dalam spesifikasi W3C untuk elemen HTML lainnya (namun, wiki.csswg.org/spec/css4-ui#pointer-events ) meskipun semua browser modern kecuali untuk IE <11 mendukungnya.
KaspiaRoach

9

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>

5

Juga mungkin seperti ini

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

1

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"

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.