Ikon tombol jQuery Mobile

Set ikon yang disediakan oleh jQuery Mobile dapat membuat tombol Anda lebih menarik.

Menambah ikon ke tombol jQuery Mobile

Untuk menambah ikon ke tombol Anda, gunakan atribut data-icon:

<a href="#anylink" data-role="button" data-icon="search">Cari</a>

Petunjuk:Anda juga dapat menggunakan atribut data-icon di elemen <button> atau <input>.

Di bawah ini kami daftarkan beberapa ikon yang disediakan oleh jQuery Mobile:

Nilai atribut Deskripsi Ikon Contoh
data-icon="arrow-l" Tanduk kiri Pengujian
data-icon="arrow-r" Tanduk kanan Pengujian
data-icon="delete" Hapus Pengujian
data-icon="info" Informasi Pengujian
data-icon="home" Beranda Pengujian
data-icon="back" Kembali Pengujian
data-icon="search" Pencarian Pengujian
data-icon="grid" Kisi Pengujian

Untuk informasi lengkap tentang ikon tombol jQuery Mobile, kunjungi Panduan Referensi Ikony jQuery Mobile。

Posisikan ikon

Anda juga dapat menentukan lokasi penempatan ikon: atas, kanan, bawah, atau kiri.

Gunakan atribut data-iconpos untuk menentukan lokasi:

Lokasi ikon:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">atas</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">kanan</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">bawah</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Kiri</a>

Coba Sendiri

Petunjuk:Secara default, ikon di dalam semua tombol ditempatkan di sebelah kiri.

Tampilkan Hanya Ikon

Jika hanya untuk menampilkan ikon, silakan atur data-iconpos menjadi "notext":

Kembali:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Cari</a>

Coba Sendiri