Cara dan Script Membuat Icon Font Awesome Pada Menu Blog
Kamis, 16 April 2020
Bagi sobat yang menjadi seorang front-end web atau blogger supaya website yang kalian miliki atau kalian kelola lebih cantik dan menarik biasanya membutuhkan tambahan icon fa (front Awesome). Harapannya dengan tambahan icon fa tersebut bisa membuat visualisasi sebuah blog atau website lebih menarik, namun masalahnya bagi sobat yang belum paham tentu saja untuk bisa mebuat icon itu tidak mudah dan memerlukan skill khusus untuk membaca script dan membuat peletakan icon-nya.
Font Awesome adalah font yang berisi berbagai macam icon yang telah dimuat untuk frontwork css yang dapat mempermudah untuk menampilan icon-icon standart menarik yang dapat mempercantik tampilan website atau blog sobat.
Untuk tampilan dan jenis-jenis icon sebenarnya sangat banyak dan bisa sobat gunakan sesuai keinginan, jika sobat ingin lebih tau banyak pilihan icon Font Awesome silahkan sobat kunjungi situs fontawesome.com dan nanti akan ada meni Icons, silahkan sobat pilih disitu.
Sebenarnya Font Awesome diperuntukan sebagai desain Bootstap, tapi masih sosok juga dipakai untuk framwork yang lainnya termasuk mempercantik web dengan frontwork css. Karena memang Font Awesome merupakan vektor jadi sobat bisa bebas menggunakannya dalam ukuran besar dan tidak perlu kawatir gambarnya akan pecah.
Cara Membuat Icon Font Awesome di Menu Blog
Cara membuat icon Font Awesome silahkan simak langkah berikut ini, sehingga sobat tidak keliru dalam meletakkan script icon Font Awesome-nya, karena jika salah peletakan scriptnya akan berakibat fatal pada performa dan html blog sobat. Untuk itu ikuti langkah-langkah berikut ini dengan benar.
- Sebelum memasang icon Font Awesome silahkan sobat buka terlebih dahulu settingan html di blog sobat, yang berada di menu TEMA kemudian pilih EDIT HTML
- Tampilan berikutnya sobat akan melihat semua script html blog sobat, perhatikan dan jangan sampai melakukan delete script yang sudah ada
- Kemudian sobat letakan script berikut ini. Pembuatan untuk icon sebenarnya sangat mudah, sobat tinggal simpan script berikut ini di atas script </body> Berikut Scriptnya : <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
- Kemudian untuk bisa memanggil icon silahkan menggunakan script berikut ini pada menu navigasi header start blog sobat , sehingga tampilannya akan seperti menu yang ada di website miraclewijaya.com ini : <i aria-hidden='true' class='fa fa-home'/><i aria-hidden='true' class='fa fa-bars'/><i aria-hidden='true' class='fa fa-cloud-download'/><i aria-hidden='true' class='fa fa-coffee'/><i aria-hidden='true' class='fa fa-comments'/><i aria-hidden='true' class='fa fa-desktop'/><i aria-hidden='true' class='fa fa-circle'/><i aria-hidden='true' class='fa fa-user'/><i aria-hidden='true' class='fa fa-angle-right'/>Salah satu contoh menu Tutorial yang saya buat adalah sebagai berikut, letakan script diatas pada script yang saya warnai merah :
<li><a href='https://www.miraclewijaya.com/p/blog-page.html'><i aria-hidden='true' class='fa fa-home'/> TUTORIAL</a></li> - Kemudian Save Editing Html yang sudah kalian lakukan. dan coba buka website atau blog sobat. Semoga berhasil
Bagaimana, cukup mudah bukan, yang terpenting jangan sampai melakukan kesalahan ketika memasukan script dan jangan sampai melakukan delete script sehingga html blog sobat tetap aman, dan membuat tampilan menu blog kalian bisa lebih menarik untuk dipandang, serta membuat para penggunjung blog merasa nyaman dengan tampilan blog sobat.
Demikian sharing dari saya terkait cara menambahkan icon fa pada menu blog, semoga informasi dan tips dari saya ini bermanfaat bagi sobat blogger, dan bisa mempercantik tampilan blog kalian semua. Jangan lupa share ya jika ada teman teman blogger lain yang ingin membuat icon fa seperti ini.