Kita tahu icon biasanya berbentuk kecil, biasanya untuk melambangkan suatu judul. Icon di sebuah blog biasanya digunakan untuk menambah kesan menarik pada tampilan blog. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menambah icon di menu navigasi blog.
Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome.
Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.
Langsung saja untuk cara menambahkan icon di menu navigasi blog, silahkan ikuti langkah-langkah dari saya berikut ini.
(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)
Demikian tutorial singkat dari saya, lebih dan kurang saya mohon maaf. Untuk tutorial blog lainnya selalu kunjungi tutorialumum.com.
Terimakasih sudah berkunjung di blog saya, jika ada pertanyaan, kritik, atau saran silahkan berkomentar di kolom komentar. Karena kritik dan saran dari kalian sangat membantu saya dalam membangun sebuah blog.
Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome.
Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.
Langsung saja untuk cara menambahkan icon di menu navigasi blog, silahkan ikuti langkah-langkah dari saya berikut ini.
(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)
Cara Menambahkan Icon di Menu Navigasi Blog
Cara Memasukan Icon di Script Menu Navigasi
- Langkah pertama, buka akun Blogger kalian. Masuk ke menu Tema, kemudian pilih Edit HTML. Kemudian masukan code dibawah ini, dan letakan sebelum kode </head>.
- Setelah meletakan kode pemanggil ke Font Awesome. Kemudian cari menu yang ingin di tambahkan icon. Setelah kalian dapatkan menu yang akan di tambahkan icon, silahkan pilih icon yang akan kalian tambahkan di Font Awesome Icons.
- Untuk memanggil icon yang kalian pilih, silahkan ketikan kode berikut.
- Letakan script di atas sebelum nama menu navigasinya. Lakukan seperti contoh di bawah ini.
- Berikut adalah contoh menu navigasi saya. Selanjutnya silahkan masukan icon sesuka hati kalian.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/><i class='fa fa-nama icon yang kalian pilih'/><li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'><i class='fa fa-file'/> Modul</a></li>
<li><a href='#'><i class='fa fa-code'/> PHP dan Mysql</a></li>
<li><a href='#'><i class='fa fa-file-powerpoint-o'/> PowerPoint</a></li>
<li><a href='#'><i class='fa fa-file-text'/> Makalah</a></li>
Cara Mengatur Ukuran Icon
- Untuk mengatur ukuran Icon kita bisa menambahkan code seperti ini.
- Berikut adalah urutan ukuran Font Awesome.
<li><a class='active' href='/'><i class='fa fa-home fa-lg'/> Home</a></li>| Icon | Code |
|---|---|
| fa-lg | |
| fa-2x | |
| fa-3x | |
| fa-4x | |
| fa-5x |
Demikian tutorial singkat dari saya, lebih dan kurang saya mohon maaf. Untuk tutorial blog lainnya selalu kunjungi tutorialumum.com.
Terimakasih sudah berkunjung di blog saya, jika ada pertanyaan, kritik, atau saran silahkan berkomentar di kolom komentar. Karena kritik dan saran dari kalian sangat membantu saya dalam membangun sebuah blog.
0 Comments