Kustomisasi Icon Font Awesome (Part 2)

Setelah pada postingan sebelumnya saya menjelaskan beberapa kustom yang bisa kita gunakan untuk memodifikasi icon Font Awesome. Pada kesempatan kali ini, saya akan menambahkan beberapa kustom yang lainnya, seperti penggunaan animasi dan perubahan warna. Tetapi jika sebelumnya Anda belum membaca postingan sebelumnya bisa baca di sini.

5. Menggunakan Animasi berputar pada icon Font Awesome

Untuk menerapkan animasi berputar kita bisa menggunakan class fa-spin atau fa-pulse.

Contoh Penggunaan:

Misalnya ingin memutar icon stroopwafel, maka tinggal menambahkan class fa-spin atau fa-pulse.

<i class="fas fa-stroopwafel fa-spin fa-4x"></i>

<i class="fas fa-stroopwafel fa-pulse fa-4x"></i>

Hasilnya adalah sebagai berikut:

Perbedaan antara fa-spin dan fa-pulse adalah pada kecepatan putarannya.

6. Menyisipkan icon ke dalam paragraf.

Gunakan fa-border  untuk membuat border, fa-pull-right untuk menyisipkan icon pada paragraf di bagian kanan, dan  fa-pull-left untuk menyisipkan icon pada paragraf di bagian kiri.

Contoh Penggunaan:

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

Republik Indonesia (RI) atau Negara Kesatuan Republik Indonesia (NKRI), atau lebih umum disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara daratan benua Asia dan Australia, serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 17.504 pulau.[11] Nama alternatif yang biasa dipakai adalah Nusantara.

<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>

Republik Indonesia (RI) atau Negara Kesatuan Republik Indonesia (NKRI), atau lebih umum disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara daratan benua Asia dan Australia, serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 17.504 pulau.[11] Nama alternatif yang biasa dipakai adalah Nusantara.

Hasilnya adalah sebagai berikut:

Republik Indonesia (RI) atau Negara Kesatuan Republik Indonesia (NKRI), atau lebih umum disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara daratan benua Asia dan Australia, serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 17.504 pulau.[11] Nama alternatif yang biasa dipakai adalah Nusantara.

Republik Indonesia (RI) atau Negara Kesatuan Republik Indonesia (NKRI), atau lebih umum disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara daratan benua Asia dan Australia, serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 17.504 pulau.[11] Nama alternatif yang biasa dipakai adalah Nusantara.

7. Mengubah Ukuran Icon Tanpa Mengubah Ukuran Kontainer/Background

Gunakan grow-#  untuk memperbesar icon dan shrink-# untuk memperkecil icon. Tanda # diganti dengan ukuran yang diinginkan.

Contoh Penggunaan:

<div class="fa-4x">

  <i class="fas fa-home" data-fa-transform="shrink-8" style="background:#00AAAA"></i>
  <i class="fas fa-home" style="background:#00AAAA"></i>
  <i class="fas fa-home" data-fa-transform="grow-6" style="background:#00AAAA"></i>
</div>
Hasilnya adalah sebagai berikut:

Cukup sampai di sini tambahannya.
Semoga bermanfaat