Penjelasan terperinci tentang sifat ikon CSS: kandungan dan ikon fon

Penjelasan terperinci sifat ikon CSS: kandungan dan ikon fon

Dalam pembangunan bahagian hadapan, ikon sering digunakan untuk meningkatkan kebolehbacaan dan interaktiviti halaman web. Dalam CSS, terdapat dua cara biasa untuk memaparkan ikon: menggunakan atribut kandungan dan ikon fon (ikon fon). Artikel ini memperincikan kedua-dua kaedah dan menyediakan contoh kod khusus.

1. Atribut kandungan

Atribut kandungan ialah atribut penting dalam CSS. Ia digunakan terutamanya untuk memasukkan kandungan sebelum dan selepas elemen. Dalam paparan ikon, anda boleh menetapkan atribut kandungan untuk merujuk aksara Unicode tertentu atau elemen lain untuk mencapai paparan ikon.

1. Gunakan aksara Unikod

Unicode ialah piawaian pengekodan aksara bersatu global yang mengandungi sejumlah besar simbol dan ikon khas. Dengan menggunakan aksara Unicode dalam atribut kandungan, kami boleh memaparkan ikon dalam halaman web dengan mudah.

Sebagai contoh, jika kita ingin menambah ikon anak panah ke atas pada butang, kita boleh menulis kod CSS seperti ini:

.btn::before {
  content: "91";
}

Dalam kod di atas, elemen pseudo ::before bermaksud memasukkan kandungan sebelum kandungan butang, dan 91 berada dalam Kod Unicode yang mewakili anak panah ke atas. Ini secara automatik akan memaparkan ikon anak panah ke atas di hadapan butang.

2. Menggunakan elemen pseudo

Selain menggunakan aksara Unikod, kami juga boleh menggabungkan elemen pseudo untuk memaparkan ikon. Dengan menetapkan atribut kandungan dan gaya pada elemen pseudo, anda boleh memaparkan ikon di lokasi tertentu pada elemen.

Sebagai contoh, jika kita ingin menambah ikon kecil di hadapan pautan dalam bar navigasi, kita boleh menulis kod CSS seperti ini:

.nav-link::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("icon.png");
  background-size: cover;
}

Dalam kod di atas, elemen pseudo ::before bermaksud memasukkan kandungan sebelum kandungan pautan, dengan menetapkan atribut kandungan kosong , dan tetapkan gaya imej lebar, tinggi dan latar belakang untuk memaparkan ikon kecil di hadapan pautan.

2. ikon fon (ikon fon)

Ikon fon ialah fail fon khas di mana setiap aksara ialah ikon vektor. Dengan menetapkan atribut fon elemen, ikon fon tertentu boleh dipaparkan.

1. Perkenalkan perpustakaan ikon

Sebelum menggunakan ikon fon, anda perlu memperkenalkan perpustakaan ikon yang sepadan terlebih dahulu. Perpustakaan ikon fon biasa termasuk FontAwesome, Iconfont, dsb. Ikon fon boleh digunakan dengan memasukkan fail fon dan fail CSS yang sepadan dalam halaman web.

Sebagai contoh, jika kita menggunakan perpustakaan ikon FontAwesome dalam halaman web, kita boleh mengikuti langkah-langkah di bawah:

1) Perkenalkan fail font-awesome.min.css ke dalam HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-M18tXYzw1Fqk0BiGJ3jyzNN4MFI8hgmAW27ozEoH847nMwccLkG0arELWC3l6DuhltShMYvdu1e3no/7I6NHQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2) Gunakan elemen HTML yang sepadan dan nama kelas untuk memaparkan Ikon

<i class="fas fa-arrow-up"></i>

Dalam kod di atas, <i> 元素代表图标，类名 fas 表示字体图标，类名 fa-arrow-up mewakili nama ikon tertentu. Dengan cara ini, kami boleh memaparkan ikon dengan anak panah ke atas dalam halaman web.

2. Laraskan gaya ikon

Setelah perpustakaan ikon fon diperkenalkan, kita boleh melaraskan paparan ikon dengan menetapkan nama kelas dan gaya elemen.

Sebagai contoh, jika kita ingin melaraskan saiz, warna dan sudut putaran ikon, kita boleh menetapkan gaya CSS yang sepadan:

.icon {
  font-size: 20px;
  color: red;
  transform: rotate(45deg);
}

Dalam kod di atas, .icon ialah nama kelas dengan menggunakan nama kelas elemen, anda boleh membuat Ia mempunyai saiz fon 20px, warna merah dan putaran mengikut arah jam sebanyak 45 darjah.

Ringkasan:

atribut kandungan dan ikon fon (ikon fon) ialah dua kaedah biasa untuk melaksanakan paparan ikon halaman web. Dengan menetapkan atribut kandungan, anda boleh terus memaparkan aksara Unicode atau elemen lain sebagai ikon dan dengan memperkenalkan perpustakaan ikon fon, anda boleh memaparkan ikon fon tertentu melalui nama dan gaya kelas. Pembangun boleh memilih kaedah yang sesuai untuk mencapai kesan paparan ikon berdasarkan keperluan khusus.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat ikon CSS: kandungan dan ikon fon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!