Hello world,

Saya baru saja menemukan sesuatu yang menarik saat memperbaharui website saya. Tiba-tiba ada masalah saat ingin menggunakan Font Awesome (FA) versi 4 yang merupakan versi yang dipakai oleh template admin yang saya gunakan dan versi 5 yang ingin saya tambahkan agar icon saya semakin banyak. Dimana saat keduanya dipasang ada kesalahan muncul yaitu font awesome versi 4 dari template saya tidak terbaca. Setelah saya cari-cari solusinya akhirnya ketemu solusi ternyata kesalahannya ada pada penempatan urutan cssnya.

Kita harus meletakkan Font Awesome 5 di urutan pertama selanjutnya baru yang versi 4. Kenapa begitu? Ini dikarenakan urutan css yang terakhir akan mereplace class/id/property yang sama yang ada di css sebelumnya. Jadi Font Awesome versi 5 dan 4 mempunyai icon-icon yang sama, akan tetapi versi 5 memiliki lebih banyak icon yang tidak dimiliki oleh versi 4. Kalau urutannya dibalik maka icon versi 4 akan sepenuhnya direplace oleh versi 5 jd tidak lg terbaca versi 4-nya.

Lihat contoh berikut:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>Facebook Icon FA 4.7</label>
<i class="fa fa-facebook"></i>
<br>
<label>Facebook Icon FA 5</label>
<i class="fab fa-facebook"></i>


Selamat mencoba :)