Menggunakan Font Awesome 5 secara Offline

Berawal dari keisengan saya mengunjungi fontawesome.io, tiba-tiba saja saja ada notifikasi header adanya font awesome 5, disitulah rasa penasaran saya untuk mengunjungi situsnya di fontawesome.com , terlihat jelas perbedaan dari versi sebelumnya dan untuk font awesome 5 memiliki setidaknya 2.181 icons (904 icons free, 1278 icons pro) tentu inilah yang harus diperhatikan pada penggunaannya.

Pada Font Awesome 5 ini setiap iconsnya memiliki 4 jenis yaitu solid, light, reguler dan brands dan tentunya ini penting sekali sehingga icons ini terlihat lebih indah dari versi sebelumnya (fontawesome 4.7), mudah digunakan dan simple namun pro. font awesome 5 ini tentu saja akan membuat project maupun website kita menjadi lebih menarik dengan penggunaan iconnya.

disini saya akan membagikan trik menggunakan font awesome 5 ini secara offline. offline? bukankah font awesome hanya bisa untuk online saja? pada font awesome 5 ini kita dapat menggunakannya secara offline, sehingga akan semakin mudah menggunakannya secara offline, terutama dalam membuat project di xampp. semakin mantap dan lancar dalam menggunakan icons ini. kita langsung saja cara menggunakannya :

download package font awesome 5 di website fontawesome.com , klik download free

buat folder dengan nama test di directory mana saja (disini saya buat di local disk E)

Setelah download selesai, ekstrak packagenya dengan extract files dan pilih folder test pada directory yang dibuat lalu klik ok (rename foldernya dengan nama fontawesome5)

Pilih Teks Editor apa saja (disini saya menggunakan atom), lalu klik File -> Add Project Folder -> Pilih Folder test -> Select Folder

Klik kanan folder test lalu buat file dengan nama index.html dengan scriptnya sebagai berikut:

index.html
```
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Font Awesome 5</title>

    <script defer src="fontawesome5/svg-with-js/js/fontawesome-all.min.js"></script>

  </head>

  <body>

    <i class="fas fa-coffee"></i>

    <i class="fab fa-whatsapp"></i>

  </body>

</html>
```
Perlu diperhatikan :
- Sesuaikan pemanggilan script fontawesome 5 terutama pada folder-foldernya
- Pada jenis font-awesome dalam penggunaan class pada tag i yaitu : fas (fontawesome solid), far (fontawesome reguler), fab (fontawesome brands), fal (fontawesome light)
Lihat hasil index.html pada browser,

maka icons yang kita panggil akan muncul sesuai dengan jenis font awesomenya dan terbukti bahwa penggunaan fontawesome 5 secara offline berhasil.