Sponsor adsense

Cara membuat icon font awesome bergerak

Faronesia.com - Pada artikel sebelumnya kita telah membahas tutorial cara menambahkan font awesome pada blog dimana pada tutorial tersebut menjelaskan cara pemasangan icon font saja, jika anda belum membacanya silahkan cari pada halaman blog ini. nah pada kesempatan kali ini kita akan membahas cara agar icon tersebut bergerak atau memberikan efek animasi. Info sedikit nih, animasi ini di kembangkan oleh Louis LIN, anda bisa fork project nya di github.

Tidak bosan-bosannya admin mengingatkan bahwa agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda terlebih dahulu sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara membuat icons font awesome bergerak
  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode </head>
  • Tempelkan kode Css dibawah ini tepat diatas kode </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css">
  • Simpan template
Selanjutnya, untuk menerapkannya lihat kode dibawah ini:

1. Menambahkan kode "faa-bounce animated" pada font awesome
Contoh:
<i class="fa fa-home faa-bounce animated"></i>
Hasilnya:

2. Menambahkan kode "faa-vertical animated" pada font awesome
Contoh:
<i class="fa fa-home faa-vertical animated"></i>
Hasilnya:

3. Menambahkan kode "faa-shake animated" pada font awesome
Contoh:
<i class="fa fa-home faa-shake animated"></i>
Hasilnya:

4. Menambahkan kode "faa-pulse animated" pada font awesome
Contoh
<i class="fa fa-home faa-pulse animated"></i>
Hasilnya:

5. Menambahkan kode "faa-flash animated" pada font awesome
Contoh:
<i class="fa fa-home faa-flash animated"></i>
Hasilnya:

6. Menambahkan kode "faa-spin animated" pada font awesome
Contoh:
<i class="fa fa-home faa-spin animated"></i>
Hasilnya:

7. Menambahkan kode "faa-tada animated" pada font awesome
Contoh:
<i class="fa fa-home faa-tada animated"></i>
Hasilnya:

8. Menambahkan kode "faa-passing animated" pada font awesome
Contoh:
<i class="fa fa-home faa-passing animated"></i>
Hasilnya:

9. Menambahkan kode "faa-passing-reverse animated" pada font awesome
Contoh:
<i class="fa fa-home faa-passing-reverse animated"></i>
Hasilnya:

10. Menambahkan kode "faa-burst animated" pada font awesome
Contoh:
<i class="fa fa-home faa-brust animated"></i>
Hasilnya:

11. Menambahkan kode "faa-falling animated" pada font awesome
Contoh:
<i class="fa fa-home faa-falling animated"></i>
Hasilnya:

Demikianlah mengenai cara membuat icons font awesome bergerak semoga bermanfaat untuk para pembaca dimanapun anda berada. jangan lupa share dan jika ingin tanggapan serta masukan silahkan di kolom komentar yang telah tersedia dibawah postingan ini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel