ikon dilarang css

Dalam pembangunan bahagian hadapan, selalunya perlu menggunakan ikon untuk mencantikkan halaman tapak web dan meningkatkan pengalaman pengguna, tetapi kadangkala kita juga mungkin perlu melarang kemunculan ikon tertentu. Pada masa ini, anda perlu menggunakan CSS untuk melaksanakan fungsi melumpuhkan ikon.

Secara amnya, cara kita merujuk kepada ikon pada halaman adalah dengan menggunakan ikon fon atau ikon SVG, kerana ia adalah ikon vektor dan tidak akan diherotkan dalam saiz yang berbeza. Terdapat dua cara utama untuk melumpuhkan ikon: satu ialah menggunakan pemilih kelas pseudo dalam CSS, dan satu lagi ialah menggunakan atribut data dalam HTML. Di bawah ini kami akan menerangkan secara terperinci pelaksanaan khusus kedua-dua kaedah ini.

Pertama, mari kita lihat kaedah pertama – menggunakan pemilih kelas pseudo CSS. Kaedah ini sesuai digunakan dengan ikon fon. Secara amnya, cara kami menggunakan ikon fon ialah dengan menetapkan atribut kelas elemen kepada nama kelas ikon, kemudian menggunakan @font-face untuk mengisytiharkan fon dalam CSS, memperkenalkan fail fon ke dalam halaman dan menetapkan fon -atribut keluarga elemen kepada Nama fon ini digunakan untuk memaparkan ikon pada halaman. Jika kita ingin menghalang ikon daripada muncul, kita boleh menggunakan kelas pseudo :before atau :after untuk menggantikan nama kelas ikon asal dan menetapkan atribut kandungan kepada kosong.

Sebagai contoh, kami mempunyai elemen dengan atribut kelas "ikon" dan kelas ikon bernama "icon-delete". Tulis seperti ini:

.icon::before {
  content: none;
}

Ini akan melumpuhkan ikon "ikon-padam" dalam elemen ini daripada muncul.

Cara lain ialah menggunakan atribut data dalam HTML. Kaedah ini sesuai digunakan dengan ikon SVG. Apabila menggunakan ikon SVG, kami biasanya memperkenalkan fail ikon SVG ke dalam halaman, dan kemudian membenamkannya ke dalam HTML menggunakan teg supaya ikon SVG boleh dipaparkan pada halaman. Cara menggunakan atribut data ialah dengan menetapkan atribut data dalam teg dan menyimpan kandungan fail ikon SVG dalam atribut data dalam bentuk pengekodan Base64, dengan itu merealisasikan fungsi memanggil ikon SVG; . Jika anda ingin melumpuhkan kemunculan ikon SVG tertentu, hanya tetapkan atribut data kepada kosong dalam teg

Sebagai contoh, kami mempunyai teg yang merujuk kepada fail ikon SVG dengan ID "ikon-padam".

<object data="" type="image/svg+xml" id="icon-delete"></object>

Dengan cara ini, ikon SVG boleh dilarang daripada muncul pada halaman.

Secara amnya, terdapat dua cara utama untuk mengharamkan ikon: menggunakan pemilih kelas pseudo dalam CSS dan menggunakan atribut data dalam HTML. Kaedah khusus harus dipilih berdasarkan situasi sebenar Jenis ikon yang berbeza, kaedah penggunaan dan keperluan perniagaan mungkin mempengaruhi pilihan kaedah. Tetapi tidak kira kaedah yang digunakan, penjagaan harus diambil untuk tidak menjejaskan gaya dan kefungsian bahagian lain semasa melaksanakan fungsi larangan ikon.

Atas ialah kandungan terperinci ikon dilarang css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!