Tidak terasa sangat lama tidak menulis catatan di web ini. Catatan terakhir web ini sudah lebih dari setengah tahun rupanya. Kali ini mau lanjut lagi mengisi karena makin banyak yang dibaca, makin banyak juga yang dilupakan.
Catatan kali ini adalah cara penggunaan Font Awesome pada Menu Website, kebetulan ada klien dari Pontianak yang minta dibuatkan tampilan menu dengan icon unik tiap menunya.
Setelah baca sana sini akhirnya ketemu cara yang bagiku mudah digunakan untuk mempercantik tampilan menu website. Beberapa hal yang diperlukan adalah:
- Editing file template.php. Ini berfungsi menambahkan css dari Font Awesome
- Module Menu Attributes. Module Menu Attributes ini berfungsi menambah class atau id CSS pada setiap menu.
Ok lanjut ke caranya saja. Pertama install Module Menu Attributes, kalau menggunakan drush akan sangat sederhana. cukup dengan perintah dibawah:
drush en menu_attributes -y
Perintah diatas adalah untuk langsung mengaktifkan Menu Attributes sedangkan parameter -y untuk langsung menjawab yes pada tiap pertanyaan. Jika modul ini belum ada maka drush akan membantu untuk download dulu.
Jika sudah selesai, kunjungi menu admin/structure/menu dan pilih salah satu menu. Buat menu seperti biasa dengan menggunakan Add Link, pada title dan path isikan nama link dan path dari link tersebut.
Pada bagian bawah form edit menu ini bisa dilihat ada tambahan Menu Link Attributes, nah pada bagian ini bisa kita masukkan id maupun class CSS sesuai keinginan. Kalo id/class sudah bisa sesuai keinginan kan enak mau "nembaknya".
Bisa dilihat pada gambar dibawah, untuk class aku isi dengan fa fa-home fa-2x. Tutorial cara penggunaan kode Font Awesome silahkan cek referensi langsung ke Font Awesome Examples.
Untuk melihat daftar icon yang disediakan Font Awesome silahkan buka cheatsheetnya. Jika sudah jangan lupa simpan.
Sampai disini kita sudah menambahkan Font Awesome pada menu, namun jika kita lihat menu kita belum menampilkan gambar/icon yang kita inginkan. Kenapa? karena file css dari Font Awesome belum kita tambahkan. Caranya sebagai berikut.
Misal kita punya sebuah themes dengan nama contoh. Cari file template.php didalam folder themes contoh kemudian ketik beberapa baris seperti dibawah.
function contoh_preprocess_html(&$vars) {
drupal_add_css('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css', array('type' => 'external'));
}
Ingat pada bagian function contoh, teks contoh itu adalah nama themes. Jadi sesuaikan dulu dengan nama themes Anda kemudian simpan file tersebut. Sebelum menambahkan css tersebut, ada baiknya find dulu apakah function XXX__preprocess_html(&$vars) sudah ada, jika sudah ada cukup kita tambahkan baris drupal_add_css aja kedalam function tersebut. Jika function tersebut ada duplikasi maka akan terjadi error.
Tahapan berikutnya clear cache untuk update themes kita terhadap perubahan tersebut. Kalau menggunakan drush cukup dengan mengetik perintah drush cc all. Cara biasa adalah masuk ke admin/appearance dan cukup melakukan refresh page saja. Cara lain adalah masuk ke admin/config/development/performance dan klik tombol Clear all caches.
Hasilnya bisa dilihat seperti gambar dibawah.
Sekian tulisan kali ini, sebenarnya pada pembuatan website klien Pontianak Web & Open Source masih ada efek tambahan yang diberikan. Namun rencananya akan aku buat terpisah catatannya.
Sumber: Font Awesome & Google
Kategori Blog: