Bagaimanakah Saya Menggunakan Font Awesome 5 Font-Families dengan Pseudo-Elements dengan betul?

Menggunakan Font Awesome 5 Pseudo-Elements dengan Font-Family yang Betul

Apabila menambahkan ikon pada halaman web menggunakan CSS pseudo-elemen dengan Font Awesome 5, khusus pemilihan font-family boleh mengelirukan. Terdapat empat pilihan keluarga fon utama: Font Awesome 5 Percuma, Font Awesome 5 Solid, Font Awesome 5 Brands dan Font Awesome 5 Regular.

Kes 1: Ikon Jenama (Menggunakan Font-Family "Jenama")

Untuk ikon khusus jenama, seperti ikon Twitter, keluarga fon yang betul ialah "Font 5 Jenama Hebat."

Kes 2: Ikon Pepejal (Tersilap Menggunakan Fon-Keluarga "Pepejal")

Untuk ikon pepejal, jangan gunakan keluarga fon "Font Awesome 5 Solid". Sebaliknya, gunakan "Font Awesome 5 Free." "Font Awesome 5 Solid" hanya mempengaruhi berat ikon, bukan keluarga fonnya.

Menggunakan Berbilang Fon-Famili

Untuk memastikan penyemak imbas menemui ikon yang betul, masukkan keempat-empat keluarga fon dalam satu sifat seperti ini:

font-family: "Font Awesome 5 Brands","Font Awesome 5 Free","Font Awesome 5 Regular","Font Awesome 5 Solid";

Pelayar akan mengutamakan fon mengikut susunan ia muncul. Jika ikon tidak dipaparkan, ia mungkin tidak disertakan dalam versi percuma atau mungkin memerlukan langganan PRO.

Nota Tambahan

• Fon "Biasa" dan "Pepejal" sahaja berbeza dalam berat, bukan font-family.
• Sesetengah ikon Biasa hanya tersedia dalam PRO pakej.
• Ikon Light dan Duotone juga merupakan sebahagian daripada pakej PRO.

Dengan mengikut garis panduan ini, pembangun boleh memastikan ikon Font Awesome 5 dipaparkan secara konsisten menggunakan fon yang betul- keluarga.

Atas ialah kandungan terperinci Bagaimanakah Saya Menggunakan Font Awesome 5 Font-Families dengan Pseudo-Elements dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!