NB: Untuk melihat icons nya berfungsi di tulisan ini jika anda menggunakan tampilan mobile/classic beralihlah ke tampilan Desktop.

Pastinya sudah pada tau kan apa itu Font Awesome? buat anda yang belum tau bisa langsung menuju halaman Font Awesome.

Nah di kesempatan yang sempit ini saya ingin memberi tutorial bagaimana membuat icons awesome itu bergerak, bagini cara menganimasikan, animasi ini di kembangkan oleh Louis LIN ya, anda bisa fork project nya di github.

Pertama tambahkan css tambahan untuk menganimasikan font awesome nya dengan cara tambahkan kode ini di header anda

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css">

Atau anda bisa langsung menjadikan satu dengan css anda cara import contoh:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css");

Tempatkan line paling atas css anda kode tersebut, atau anda bisa langsung manggabungkan kodenya dengan css anda.

Lalu setelah itu cara menggunakanya cukup mudah yaitu dengan cara memanggil class icon awesome anda spasi class animasinya.

<i class="fa fa-ikon-anda animasinya"></i>

Class animasinya anda bisa lihat di sini. Intinya ke dua class tersebut anda gabung menjadi satu, tambahkan spasi untuk menambah class lebih dari satu, sebagai contoh:

 <i class="fa fa-thumbs-up fa-2x faa-bounce animated"></i>
 <i class="fa fa-thumbs-o-down faa-vertical animated">
 <i class="fa fa-hand-paper-o faa-shake animated">
 <i class="fa fa-play-circle faa-pulse animated">

Mudah kan, untuk membuat bergerak ikon nya saat di hover/klik ikuti aja kodenya On Hover, contoh:

 <i class="fa fa-heart faa-tada animated-hover"></i>
 <i class="fa fa-heart faa-tada animated-hover" style="color:#f66767"></i>

Di atas adalah hover jika di klik ikon nya saja, jadi misal di depan link ada icon nya ketika link di hit icon nya tidak bergerak kalau yang di hit bukan icons nya, untuk membuat gerak juga ketika posisi area link di hit anda perlu menambah class faa-parent animated-hover di alamat href link nya, dan class icons nya di isi class “On Parent Hover” contoh

 Sukai ini  <a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-up faa-pulse"></i> Sukai ini</a>

Anda juga bisa mempercepat atau memperlambat gerakan animasi dengan menambah class faa-fast untuk lebih cepat dan faa-slow untuk lebih lambat. 🤓

Jadi seperti itu kurang lebih cara membuat animasi fort awesome ikon nya bergerak :)