Bagaimana Menggunakan Ikon Font Hebat sebagai Kandungan CSS?

Gunakan Ikon Font Hebat sebagai Kandungan CSS

Dalam menggunakan ikon Font Awesome sebagai kandungan CSS, elakkan membenamkan kod HTML terus dalam sifat kandungan. Sebaliknya, ikuti langkah berikut:

FontAwesome 5:

1. Tentukan keluarga fon sebagai "Font Awesome 5 Free" atau "Font Awesome 5 Brands" bergantung pada jenis ikon.
2. Gunakan kod melarikan diri Unicode dan bukannya entiti HTML untuk ikon, cth., "f095" untuk "fa-phone".
3. Pastikan berat fon ditetapkan kepada 900.

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

FontAwesome 4 dan Bawah:

1. Salin sifat kandungan dengan entiti yang sepadan daripada helaian gaya Font Awesome.
2. Gunakan kandungan yang disalin dalam sifat kandungan dengan keluarga fon yang betul.

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

Untuk jarak antara ikon dan teks:

1. Tetapkan paparan: sebaris -sekat; untuk ikon mengelakkan pertindihan.
2. Tambah padding-kanan: untuk menyediakan ruang antara keduanya.

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

Untuk menukar ikon pada tuding:

1. Buat pemilih berasingan untuk keadaan :legar.
2. Ubah suai sifat kandungan untuk menentukan kod melarikan diri Unikod baharu untuk ikon tuding.

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

Pertimbangkan untuk menetapkan tetapkan lebar pada pengisytiharan ikon asas untuk mengelakkan dorong disebabkan saiz ikon yang berbeza.

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