Cara Menambahkan Icon Di Sajian Kafetaria 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 aku akan membagikan tutorial memakai Font Awesome untuk menampilkan icon di blogger dengan mudah dan cepat.

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

Sebelumnya aku sudah pernah posting beberapa sajian navigasi / sajian kafe yang sudah di tambahkan icon, jadi kalian tinggal mengganti HTML iconnya saja, tanpa menambahkan css lain kecuali CSS Font Awesomenya. Untuk linknya dapat 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 memakai Font Awesome

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

• Sekarang masuk ke Template → Edit HTML, kemudian cari aba-aba </head>

• Setelah ketemu, masukan css font awesome dibawah ini sempurna 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 mendapat html iconnya kalian dapat mengambil di situs resminya, silahkan masuk ke link berikut ini Icon Pack FontAwesome, tinggal klik icon yang ingin di gunakan kemudian copy htmlnya.

Nah tahap selanjutnya kalian tinggal memilih daerah yang ingin dipasang icon, contohnya memasnagnya di sajian navigation bar.

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

• Kalo html menunya sudah keemu, misal struturnya menyerupai 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://tutorialcarapintar.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 sajian yang lainnya, kalo kalian ingin memasang iconnya di semua menu.

• Kalo sudah, tinggal save

• Untuk rujukan jadinya pada sajian di atas, kalian dapat lihat di link ini Contoh Menu Dengan Icon

Buat yang ingin memasangnya di daerah lain, kalian tinggal mencari HTMLnya kemudian masukan iconnya menyerupai di atas
Kalian juga dapat memasang iconnya melalui css tanpa harus memasang htmlnya

• Kalo ada yang kurang mungkin nanti akan aku tambahkan

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

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