Bagaimanakah Saya Boleh Menggunakan Ikon Hebat Font dalam Kandungan CSS?

Menggunakan Ikon Font Hebat dalam Kandungan CSS

Dalam percubaan untuk menggunakan ikon Font Awesome dalam atribut kandungan CSS, anda mungkin pernah mengalami kesukaran kerana ketidakupayaan untuk membenamkan kod HTML dalam konteks tersebut.

Font Hebat 5 dan Kemudian

Untuk Font Awesome 5 dan yang lebih baru, anda harus meneruskan seperti berikut:

• Tentukan keluarga fon, memastikan anda menentukan sama ada "Font Awesome 5 Free" atau "Font Awesome 5 Brands" bergantung pada jenis ikon yang anda inginkan.
• Sertakan sifat kandungan, tetapi gunakan jujukan melarikan diri Unicode yang sepadan dan bukannya entiti HTML.
• Tetapkan berat fon kepada 900.

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Fon Hebat 4 dan Terdahulu

Untuk Font Awesome 4 dan versi terdahulu, pakai ini langkah:

• Cari helaian gaya hebat fon.
• Kenal pasti kelas ikon yang dimaksudkan (cth., telefon fa).
• Salin sifat kandungan yang dikaitkan dengan kelas itu, yang mengandungi kod entiti.
• Gunakan kod ini dalam CSS anda, berikannya kepada kandungan atribut.

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Pelarasan Jarak

Jika anda memerlukan jarak antara ikon dan teks, perhalusi tetapan berikut:

• Tetapkan sifat paparan kepada sekatan sebaris.
• Dalam pemilih a:before, nyatakan nilai padding-right yang sesuai.

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Kesan Tuding

Untuk mengubah suai ikon pada tuding, tambahkan pemilih berasingan untuk :hover dan tentukan jujukan melarikan diri Unicode yang dikemas kini dalam atribut kandungannya:

a:hover:before {
    content: "\f099";
}

Lebar Pelarasan

Untuk mengelakkan pergerakan ikon disebabkan oleh variasi saiz, pertimbangkan untuk menetapkan lebar tetap dalam pengisytiharan asas:

a:before {
    /* Other properties here, as seen in previous code snippets */
    width: 12px; /* Set a desired width to prevent icon shifting */
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Ikon Hebat Font dalam Kandungan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!