Sejak menggunakan Twitter Bootstrap versi 3 di PHPMaker versi 11, maka sekarang Web Developer pun dapat dengan mudahnya menambahkan icon di Item Menu pada Aplikasi Web yang di-generate oleh PHPMaker. Seperti yang kita ketahui, Twitter Bootstrap 3 sudah menyediakan Glyphicons yang berisi kumpulan icon-icon yang bisa diakses sangat mudah tanpa menggunakan sintaks img src.
Artinya, Anda tidak perlu lagi repot-repot menyediakan icon sendiri untuk digunakan di Aplikasi Web Anda. Saya sarankan agar Anda sebaiknya menggunakan icon-icon yang sudah disediakan oleh Twitter Bootstrap 3 tadi. Enaknya lagi, icon-icon ini sudah mewakili semua jenis icon yang sering dibutuhkan di sebuah Aplikasi Web. Menurut dokumentasi yang link-nya sudah saya share di atas, terdapat 200 jenis icon dalam format huruf (font).
Selain itu, icon-icon ini dapat diakses sangat mudah cukup dengan memanggil nama class-nya. Ada sebuah situs yang cukup bagus untuk dijadikan sebagai referensi di samping situs resmi Bootstrap di atas tadi. Nama situs itu adalah: Bootstrap 3 Glyphicons. Saya lebih suka melihat situs ini untuk mendapatkan nama class setiap icon. Di situs ini juga disediakan dokumentasi lengkap cara pemakaiannya.
Katakanlah Anda memiliki salah satu Item Menu dengan teks Help di dalam project PHPMaker Anda. Jika Anda ingin menambahkan icon yang terkait dengan Item Menu ini di Aplikasi Web yang Anda hasilkan dengan PHPMaker 11, maka cukup tambahkan sintaks berikut ke Item Menu tadi melalui menu: Tools -> Multi-Language Property Editor -> Menu Text pada project PHPMaker Anda:
<i class='glyphicon glyphicon-question-sign'></i> Help
Khusus untuk menampilkan icon pada Item Menu, maka kita cukup menggunakan tag i (italic) dengan menyertakan atribut class glyphicon glyphicon-question-sign di dalam tag i pembuka tersebut. Pastikan Anda menyertakan spasi setelah tag i penutup dan sebelum teks Help tadi.
Pastikan juga di dalam root folder dari Aplikasi Web yang di-generate oleh PHPMaker, sudah ada sub-folder fonts yang terdapat di bawah sub-folder bootstrap3. Di dalam sub-folder fonts tadi pastikan sudah ada 4 file, masing-masing sebagai berikut:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Sangat mudah, bukan? 🙂
thanks, working bro
You’re welcome.
pak Masino, Kalo tombol Logout sama Tombol Change Password mau di kasih icon bagaimana caranya ?
Pakai server event MenuItem_Adding, misalnya:
if ($Item->Url == 'logout.php') { $Item->Text = '<i class="glyphicon glyphicon-log-out"></i> ' . Language()->Phrase("Logout"); } else if ($Item->Url == 'login.php') { $Item->Text = '<i class="glyphicon glyphicon-log-in"></i> ' . Language()->Phrase("Login"); }kalo buat icon detail pakenya glyphicon-(apa?) ya gan???
Coba langsung saja ke halaman ini: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
pak masino klw tempalte bootstarap seperti adminlte di phpmaker,gmn ya pak..,mohon info nya
terima kasih
Apakah seperti ini yang dimaksud? –> https://codecanyon.net/item/advanced-horizontal-vertical-layout-for-phpmaker-2018-template/20465156
Untuk mengisi site icon bar pakai apa pak?
Maksudnya bagaimana ya?