Cara Memasang Icon Awesome Pada Menu Navigasi Blog - Salam sahabat blogger bagi yang sudah terbiasa menggunakan sintax HTML, Javascript, CSS pasti akan terasa mudah ketika anda sedang mengedit sebuah website/Blog. Bagi sebagian sahabat blogger mempercantik tampilan blog sudah menjadi keharusan.
Kenapa begitu?
Karna dapat menarik perhatian para user atau para pengunjung untuk melihat blog kita.Untuk itu kali ini saya bermaksud membagikan Cara Memasang Icon Pada Menu Navigasi Blog Menggunakan Font Awesome, supaya Menu Navigasi pada blog sobat biar lebih menarik.
Sebelum saya melanjutkan langkah-langkah nya, terlebih dahulu saya menjelaskan kepada anda.
Font Awesome ini sekumpulan gambar icon kecil yang dapat di pasang pada berbagai website/Blog, dengan hanya meletakkan tag script HTML dan CSS pada tamplatenya.
Cukup dengan meletakkan tag script HTML dan CSS name tertentu kita sudah dapat menggunakan icon-icon yang sudah tersedia pada website penyedia font awesome tersebut.
Pada umumnya para blogger memasang font awesome pada Menu Navigasi, Menu Bar dan berbagai Widget dengan tujuan untuk mempercantik tampilan pada website/blog.
Ok sobat silahkan anda simak langkah-langkah cara memasang icon pada Menu Navigasi Blog Menggunakan Font Awesome.
Langkah 1:
Untuk memasang dan menampilkan icon Font Awesome, sebelumnya Anda harus memasang CSS font di tamplate sobat.
Langkah 2:
- Silahkan anda klik Tamplate ->Edit HTML
- Kemudian silahkan anda cari kode </head>. Supaya mempercepat proses pencarian kode tersebut anda bisa menggunakan Search engine dengan menekan Ctrl+F
Langkah 3:
- Setelah ketemu, silahkan masukkan kode CSS di bawah ini, tepat diatas kode </head>.
Tinggal klik icon yang anda sukai, setelah itu silahkan copy sintak html nya.
Tahap selanjutnya, anda tinggal menentukan tempat mana yang anda inginkan kan untuk di pasang icon tersebut, contohnya disini saya memasang nya di Menu Navigasi. Anda tinggal mencari script menu navigasi nya, kemudian ganti dengan script yang saya sediakan dibawah ini.
fa fa-bold bisa anda ganti misalnya icon komputer ganti dengan fa fa-komputer.
Jika anda berhasil contohnya akan tampil seperti gambar dibawah ini.
Kalau ada pertanyaan silahkan anda tinggalkan di kolom komentar.
Karna dapat menarik perhatian para user atau para pengunjung untuk melihat blog kita.Untuk itu kali ini saya bermaksud membagikan Cara Memasang Icon Pada Menu Navigasi Blog Menggunakan Font Awesome, supaya Menu Navigasi pada blog sobat biar lebih menarik.
Sebelum saya melanjutkan langkah-langkah nya, terlebih dahulu saya menjelaskan kepada anda.
Apa Itu Font Awesome
Font Awesome adalah sekumpulan berbagai gambar vektor icon kecil yang dapat dengan mudah untuk di edit dari mulai ukuran, warna drop shadow hingga ukuran yang anda inginkan.Font Awesome ini sekumpulan gambar icon kecil yang dapat di pasang pada berbagai website/Blog, dengan hanya meletakkan tag script HTML dan CSS pada tamplatenya.
Cukup dengan meletakkan tag script HTML dan CSS name tertentu kita sudah dapat menggunakan icon-icon yang sudah tersedia pada website penyedia font awesome tersebut.
Pada umumnya para blogger memasang font awesome pada Menu Navigasi, Menu Bar dan berbagai Widget dengan tujuan untuk mempercantik tampilan pada website/blog.
Ok sobat silahkan anda simak langkah-langkah cara memasang icon pada Menu Navigasi Blog Menggunakan Font Awesome.
Langkah 1:
Untuk memasang dan menampilkan icon Font Awesome, sebelumnya Anda harus memasang CSS font di tamplate sobat.
Langkah 2:
- Silahkan anda klik Tamplate ->Edit HTML
- Kemudian silahkan anda cari kode </head>. Supaya mempercepat proses pencarian kode tersebut anda bisa menggunakan Search engine dengan menekan Ctrl+F
Langkah 3:
- Setelah ketemu, silahkan masukkan kode CSS di bawah ini, tepat diatas kode </head>.
/* Syntax Code */
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/5.0.0/css/font-awesome.min.css"/>Tinggal klik icon yang anda sukai, setelah itu silahkan copy sintak html nya.
Tahap selanjutnya, anda tinggal menentukan tempat mana yang anda inginkan kan untuk di pasang icon tersebut, contohnya disini saya memasang nya di Menu Navigasi. Anda tinggal mencari script menu navigasi nya, kemudian ganti dengan script yang saya sediakan dibawah ini.
/* Syntax Code CSS */
<li><a href=''><i aria-hidden='true' class='fa fa-bold' style='font-size:18px'/> Blogger</a>
fa fa-bold bisa anda ganti misalnya icon komputer ganti dengan fa fa-komputer.
Jika anda berhasil contohnya akan tampil seperti gambar dibawah ini.
Post a Comment