Cara Membuat Icons Font Awesome Bergerak

Cara Membuat Icons Font Awesome Bergerak

Cara Membuat Icons Font Awesome Bergerak
Cara Membuat Icons Font Awesome Bergerak

Membuat Icons Font Awesome bergerak? Apakah bisa, nah banyak dari kalian yang belum mengetahui caranya untuk membuat icon pada font awesome bergerak, kebanyakan dari kalian tentu hanya sebatas menggunakan nya saja tanpa meng explore lebih jauh, nah pada kesempatan kali ini admin akan berikan tutorialnya, tutorialnya juga begitu cukup mudah, hanya menerapkan script yang sudah disediakan dan diletakkan di dalam script pada website atau pun blog kalian, ini tidak terkecuali ya mau di blogger, wordpress ataupun website native biasa, cara ini bisa dilakukan. Tidak hanya itu pada artikel kali ini admin memberikan tentang bagaimana memberi warna, mengubah ukuran, memutar icon font awesome.

Cara Membuat Icons Font Awesome Bergerak :

1.1 Bagaimana Cara Memasang atau Menggunakan Font Awesome?

Perlu kalian ketahui sebelum masuk ke langkah selanjutnya, tentu kalian harus sudah mengintergrasi font awesome terhadap blog, wordpress, atau website native kalian sediri, yang dimana kalian telah buat, untuk tutorial nya kalian bisa lihat disini, jadi admin tidak perlu membahas lagi disini.

1.2 Bagaimana Membuat Icons Font Awesome Bergerak

Nah untuk membuat font awesome bergerak caranya sama seperti kalian memasang da meggunakan font awesome pada langkah sebelumya, kalian hanya perlu meletakkan script dibawah ini tepat sebelum atau sesudah tag <head> & </head>

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

Setelah itu untuk cara menggunakanya cukup mudah yaitu dengan cara memanggil class icon font awesome kalian spasi class animasinya.

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

Untuk perintah terhadap class animasi nya kalian bisa melihatnya disini kalian juga bisa mempercepat atau memperlambat gerakan pada animasi dengan menambah class faa-fast untuk lebih cepat dan faa-slow untuk lebih lambat.

1.3 Bagaimana Cara Memutar Icon Font Awesome

Bukan Animasi saja yang admin akan bahas memutar icon font  awesome juga admin bahas disini, nah kalian juga belum tau kan tentang ini, untuk caranya sendiri cukuplah mudah dengan menambahka peritah class seperti dibawah ini.

<i class="fa fa-shield"></i>Icon Normal<br>
<i class="fa fa-shield fa-rotate-90"></i> Icon Menjadi 90° 
<i class="fa fa-shield fa-rotate-180"></i> Icon Menjadi 180°
<i class="fa fa-shield fa-rotate-270"></i> Icon Menjadi 270°
<i class="fa fa-shield fa-flip-horizontal"></i> Icon Menjadi horizontal
<i class="fa fa-shield fa-flip-vertical"></i> Icon Menjadi vertical

1.4 Bagaimana Cara Memberi Warna pada Icon Font Awesome

Agar lebih menarik terhadap icon yang kalian pakai tentu harus ada variasinya juga dong, nah disini kalian yang belum tau caranya memberi warna terahadap font awesome yang kalian gunakan, caranya gambar kalian hanya perlu menggunakan perintah class style="color : seperti contoh dibawah ini.

<i class="fa fa-android" style="color: green"></i> icon android diberi warna hijau

1.5 Bagaimana Mengubah Ukuran Icon Font Awesome

Bagi kalian yang kurang akan tampilan atau ukuran terhadap icon yang kalian pakai, kalian bisa mengubah ukurannya dengan menggunakan perintah class seperti contoh dibawah ini.

Catatan!
fa-2x Untuk perbesaran 2x lebih besar
fa-3x Untuk perbesaran 3x lebih besar
fa-4x Untuk perbesaran 4x lebih besar
fa-5x Untuk perbesaran 5x lebih besar

<i class="fa fa-pencil fa-2x"></i>

Penutup

Sampai dipenghujung artikel mungkin itu saja tutorial nya, bagi kalian yang belum mengetahuinya semoga dengan adanya artikel ini kalian jadi lebih tahu banyak tentang penggunaan terhadap font awesome, ditunggu artikel selanjutnya, semoga bermanfaat dan sampai jumpaaaa.

Anda mungkin menyukai postingan ini