Cara Membuat Menu Bar dan Navigasi dengan Tambahan Icon Font Awesome

Cara Menambahkan CSS Font Awesome Icon pada Menu Navigasi Blog di Blogger - Pada kesempatan kali ini saya akan membagikan Tips Tutorial Blogger bagaimana cara memasang CSS Font Awesome Icon di Menu Navigasi Header dan Footer ke Blog dengan Mudah.

Fungsi dari Font Awesome ini untuk menampilkan icon di blog kita agar tampilan terlihat seperti blog keren dan bisa dibilang Template Premium.

Icon ini adalah dimensi gambar yang ukurannya kecil dan dapat diartikan icon ini melambangkan sesuatu arti bagi pemiliknya.

Sebelum memasang Font Awesome Icon pada Menu Navigasi Header anda harus memasang CSS Font Awesome dulu Karena jika CSS nya belum dipasang Icon tidak akan muncul.

Gambar dibawah ini adalah contoh Menu Navigasi Header yang memakai Icon Font Awesome

Berikut cara memasang dan menambahkan icon font awesome di menu bar atau navigasi di blogger

1. Langkah awal pasang css font awesome ke blog, login ke dashboard blogger sebelum memasang
2. Selanjutnya Pilih Tema lalu Pilih Edit HTML
3. Kemudian salin kode CSS dibawah ini tepat di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

      4. Jika sudah Klik Simpan Tema.

Kita sudah melalui cara pemasangan Font Awesome di tema blogger. Jika sebelumnya sudah memasang abaikan cara memasang CSS diatas di tema. Jika sudah selesai dibagian ini kita lanjut ke cara memasang icon tersebut sesuai selera kalian.

Selanjutnya untuk memilih icon sesuai kebutuhan, Silahkan masuk ke link Font Awesome Bootstrap Cheat Sheets 

Cara Memasang Icon di Navigasi Header atau Footer

1. Buka link font awesome diatas
2. Pilih icon sesuai kebutuhan
3. Masuk ke Tema dan pilih Edit HTML
4. Cari Menu Header atau Footer
5. Ganti dan Salin kode dibawah ini

<li><a href='#' ><i class='fa fa-sitemap'/>&#160;Daftar Isi</a></li>

• INFO
• Font Awesome yang saya gunakan adalah Font Awesome Bootstrap jadi untuk mencari icon bisa masuk ke link saya berikan
• Simbol # ganti dengan Link anda
• Tulisan fa-sitemap ganti dengan sesuai kode icon
• Kata Daftar Isi ganti dengan nama menu blog anda


Itulah Cara Menambahkan CSS Font Awesome Icon pada Menu Navigasi Blog di Blogger. 


Tambahan
Cara Menambahkan Font Awesome ke dalam Postingan Blog
<ul class="fa-ul"> <li><i class="fa-li fa fa-compass"></i>INFO</li> </ul>                                                                                                                                                                              <ul class="fa-ul"> <li><i class="fa-li fa fa-compass fa-spin"></i>INFO</li> </ul>
Contohnya seperti ini
• INFO
• INFO


Kata INFO bisa diganti sesuai kata keinginan anda.


Kalau kamu kesulitan memahami, bisa lihat video dibawah ini
( akan segera di upload )


Jika Postingan Artikel saya ini bermanfaat jangan lupa bagikan ke Social Media anda dan jika ada pertanyaan anda bisa komentar dibawah. 


Dapatkan Notifikasi dari Blog masfarel.com GRATIS. 
Masukan Email untuk Berlangganan dan Klik FOLLOW untuk mengikuti Blog kami.


--- Selamat Mencoba ---