CSS dasar Font Awesome v 4, 5, 6 Free

Postingan terkait:

1. Pseudo element Font Awesome 6
2. Font Awesome 5.1.1
3. CSS Font Awesome 5
4. Font Awesome 4.7.0

Intro

Postingan ini hanya berlaku untuk yang menggunakan kit Font Awesome 6 Free.

Contoh script kit Font Awesome 6 Free :

<script src="https://kit.fontawesome.com/c1234567890.js" crossorigin="anonymous"/>

Dan tujuan postingan ini adalah menjelaskan trik bagaimana cara mengatasi masalah audit pagespeed insight yang terjadi setelah menyematkan script tersebut yaitu terkait pengurangan CSS.

Karena script tersebut mencakup style dari seluruh ikon yang tersedia. Sedangkan penggunaannya di blog mungkin paling banyak sekitar 2 sampai 5 % saja, bisa jadi kurang dari itu.
Padahal, jumlah ikon yang tersedia total 7000 ikon termasuk yang versi Pro. Dan yang diakses hanya versi Free dengan jumlah ikon sekitar 2000 ikon.
lihat di fontawesome.com.

Agar diketahui bahwa kit Font Awesome 6 Free ini sudah mencakup versi sebelumnya yaitu :

1. Font Awesome 4
2. Font Awesome 5

Screenshot berikut ini adalah dokumentasi blog ini yang menggunakan script Font Awesome 6 Free.
Pada saat melakukan audit menggunakan Chrome Devtool dan terbaca bahwa script versi 6 sudah mencakup 2 versi sebelumnya.

Jadi pada dasarnya pengguna Font Awesome versi 4 dan 5 bisa menggunakan versi 6 ini, sekaligus mengupdate jenis ikon terbaru yang tersedia di versi 6. Dengan syarat sbb:

1. Hapus tag script kit Font awesome yang terpasang sebelumnya, ganti dengan versi 6.
2. Jika belum punya script-nya, akses ke fontawesome.com
3. Login dan buat akun baru. (1 akun type Free hanya bisa untuk 1 kit.)
4. Lalu buat kit, pilih WebFont.
5. Jika sudah mengakses kit-nya, copy URL yang ada dalam kit lalu buka di tab baru.
   URL kit seperti ini:
   https://kit.fontawesome.com/c1234567890.js
6. Kemudian kembali ke template Blogger, buat atau copy tag script lengkap dengan string CDATA dibawah ini:
   <script>//<![[CDATA --paste disini-- //]]></script>
   Pastikan letaknya diatas kode </head> atau diatas tag </body>
7. Kembali ke tab URL kit yang sudah dibuka sebelumnya, copy semua kode yang ada dihalaman tersebut lalu paste di antara tag script seperti petunjuk diatas.
8. Simpan dan buka halaman blog, periksa dan pastikan ikon yang terpasang tetap muncul.

Hasil Audit Pagespeed Insight

Hasil audit dilakukan setelah menerapkan pemasangan Font Awesome dengan metode diatas.

Sebagai catatan, script Font Awesome 6 diblog ini ditempatkan diatas tag </body>

Score halaman

Lolos audit pengurangan CSS

Nilai metrix

<link href='https://ka-f.fontawesome.com' rel='dns-prefetch'/> <link as='style' href='https://ka-f.fontawesome.com/releases/v6.1.1/css/free.min.css?token=c3075d8a16' rel='preload'/> <link as='font' href='https://ka-f.fontawesome.com/releases/v6.1.1/webfonts/free-fa-solid-900.woff2' rel='preload'/>