Cara Menambahkan Icon Di Sajian Kafe 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 kafetaria 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
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 arahan </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 perihal 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://tips-darikita.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 pola kesudahannya pada sajian di atas, kalian dapat lihat di link ini Contoh Menu Dengan Icon
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 perihal Tutorial Cara Menmasang Icon di Menu Menggunakan Font Awesome ini supaya bermanfaat. Keyword Terkait : Cara Memasang Icon Font Awesome di Menu Blogger, Tutorial Cara Menggunakan Font Awesome di Blog, menambahkan icon di sebelah sajian bar