Cara Menambahkan Icon di Menu Bar dengan Font Awesome

Tutorial Cara Menambahkan Icon di Menu Navigation Bar Menggunakan Font Awesome

Cara Menggunakan Icon Font Awesome di Blog, pada postingan kali ini saya akan membagikan tutorial menggunakan Font Awesome untuk menampilkan icon di blogger dengan mudah dan cepat.

Untuk menampilkan atau memasang icon sendiri ada banyak cara, bisa menggunakan gambar / logo, icon SVG, CSS Background dll, tapi supaya lebih simple dan mudah kita gunakan saja Font Awesome

Sebelumnya saya sudah pernah posting beberapa menu navigasi / menu bar yang sudah di tambahkan icon, jadi kalian tinggal mengganti HTML iconnya saja, tanpa menambahkan css lain kecuali CSS Font Awesomenya. Untuk linknya bisa liat di post berikut

Tutorial Blogger Lainnya :

• 
  

  
  Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS
  

  
  


• 
  

  
  Memasang Icon di Menu Navigation Menggunakan Image
  

  
  


• 
  

  
  Membuat Sidebar Navigation Menu Dropdown Responsive
  

  
  

Cara menggunakan Font Awesome

• Untuk menampilkan icon dengan FontAwesome, kalian terlebih dahulu harus memasang CSS fontnya di template

• Sekarang masuk ke Template ? Edit HTML, lalu cari kode </head>

• Setelah ketemu, masukan css font awesome dibawah ini tepat diatasnya



<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

• Save Template

Untuk mendapatkan html iconnya kalian bisa mengambil di situs resminya, silahkan masuk ke link berikut ini Icon Pack FontAwesome, tinggal klik icon yang ingin di gunakan lalu copy htmlnya.

Nah tahap selanjutnya kalian tinggal menentukan tempat yang ingin dipasang icon, misalnya memasnagnya di menu navigation bar.

Kalian Cari HTML menunya, buat yang belum tau mungkin bisa membacanya di tutorial sebelumnya tentang Tutorial Cara Edit Menu Navigation Bar

• Kalo html menunya sudah keemu, misal struturnya seperti dibawh ini ?



<nav class='contoh'>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="#">Tutorial</a></li>
  <li><a href="URL">Widget</a></li>
  <li><a href="UTL">Template</a></li>
  <li><a href="https://mastamvan.blogspot.com">Tips & Trik</a></li>
</ul> 
</nav>

• Kalian tinggal tambahkan HTML icon yang sudah di copy di sebelah Judul Menunya, Contoh :





Klik Untuk Memperbesar






<li><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>

• Begitu juga dengan Judul menu yang lainnya, kalo kalian ingin memasang iconnya di semua menu.

• Kalo sudah, tinggal save

• Untuk contoh hasilnya pada menu di atas, kalian bisa lihat di link ini Contoh Menu Dengan Icon

Buat yang ingin memasangnya di tempat lain, kalian tinggal mencari HTMLnya lalu masukan iconnya seperti di atas


Kalian juga bisa memasang iconnya melalui css tanpa harus memasang htmlnya

• Kalo ada yang kurang mungkin nanti akan saya tambahkan

• Buat kalian yang belum mengerti bisa bertanya di kolom komentar.

cukup sekian artikel tentang Tutorial Cara Menmasang Icon di Menu Menggunakan Font Awesome ini semoga bermanfaat. Keyword Terkait : Cara Memasang Icon Font Awesome di Menu Blogger, Tutorial Cara Menggunakan Font Awesome di Blog, menambahkan icon di sebelah menu bar