Cara Menambahkan Icon di Menu Bar

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 Backgrounddll, 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 :

• Memasang Icon di Menu Navigation Menggunakan Image

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.

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

<nav class='contoh'> <ul>  <li><a href="/">Home</a></li>  <li><a href="#">Belajar-Blog</a></li>  <li><a href="URL">Download-Slide</a></li></ul> </nav>

• Kalian tinggal tambahkan HTML icon yang sudah di copy di sebelah Judul Menunya, Contoh bisa liat di tulisan yang berwanah orange:

<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 masih binggung dengan turtorial dari yang saya tulis bisa langsung tinggalkan komentar dibawah yah Jangan lupa like & share postingan ini dan terimakasih telah berkunjung.

Tweet