Mengapa Ikon Hebat Fon Saya Ditunjukkan sebagai Petak Segi Empat Bukan Simbol?

Fon Hebat Tidak Memaparkan Ikon Seperti Yang Dijangka: Petak Muncul Sebaliknya

Memasukkan ikon Font Hebat ke dalam reka bentuk web anda boleh mengecewakan apabila simbol muncul sebagai petak kosong. Isu ini sering timbul disebabkan oleh pelaksanaan kelas Font Awesome yang salah.

Cara Memasukkan Fail Hebat Font

Kod HTML yang anda berikan termasuk fail CSS yang diperlukan untuk Font Hebat:

<link rel="stylesheet" href="css/font-awesome.css">

Ralat: Hilang Kelas

Kod anda menggunakan kelas ikon yang tidak lengkap:

<i class="icon-camera-retro"></i>

Untuk memaparkan ikon dengan betul, anda memerlukan dua kelas: kelas fa dan kelas yang menentukan ikon, seperti sebagai fa-camera-retro.

Betul Pelaksanaan

<i class="fa fa-camera-retro"></i>

Kemas Kini Bootstrap 5

Dalam Bootstrap 5, awalan fa telah ditamatkan. Lalai baharu ialah fas (gaya pepejal) dan fab (gaya jenama):

<i class="fas fa-camera-retro"></i>  <!-- Solid icon -->
<i class="fab fa-twitter"></i>        <!-- Brand icon -->

Dengan menggunakan kelas yang betul, ikon Font Awesome akan dipaparkan seperti yang dijangkakan, menghapuskan petak yang menyusahkan yang sebelum ini menghalang reka bentuk anda .

Atas ialah kandungan terperinci Mengapa Ikon Hebat Fon Saya Ditunjukkan sebagai Petak Segi Empat Bukan Simbol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!