Cara Menambahkan Icon di Menu Bar dengan Font Awesome

memasang icon di menu navigation bar

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

Cara menggunakan Font Awesome

  • Untuk menampilkan icon dengan FontAwesome, kalian terlebih dahulu harus memasang CSS fontnya di template
  • Sekarang masuk ke TemplateEdit 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 :

  • memasang icon font awesome
    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
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

9 komentar
  1. Mas. Blh minta bagi template nya

    ReplyDelete
  2. gan kenapa ya saya mau bikin spasi dengan kode   tetapi ketika mau menyimpah template malah error "nbsp" nya. alhasil saya jadi pakai underscore. bisa lihat di blog saya bagian widget kategori http://www.chidielz-project.tk

    ReplyDelete
    Replies
    1. Coba pake margin / padding aja gan (y)

      misal ↓
      img#icon {
      padding-right: 1em;
      }

      Delete
  3. thanks . akhirnya bisa juga, hehe :D

    ReplyDelete
  4. terimaa kasih tuturialnya kang, sangat bermanfaat

    ReplyDelete
  5. terima gan infonya.. sip work di blog ane.. :v

    ReplyDelete
  6. Gan tutorialnya bagus, makasih gan.
    Tolong gan sekalian review ya mau praktek. www.pgsjjakarta.com

    ReplyDelete
  7. Terima kasih sudah work mas tutornya |o|

    ReplyDelete