Ikon CSS dengan contoh-tutorial css-php.cn

CSS Icons with examples

Ikon CSS

Ikon boleh ditambah dengan mudah pada halaman HTML kami, dengan menggunakan perpustakaan ikon.

Cara Menambah Ikon

Cara paling mudah untuk menambah ikon pada halaman HTML anda ialah dengan pustaka ikon, seperti Font Awesome.
Tambahkan nama kelas ikon yang ditentukan pada mana-mana elemen HTML sebaris (sepertiatau).
Ikon CSS ialah simbol atau perwakilan grafik yang dibuat menggunakan
CSS (Cascading Style Sheets) dan bukannya format imej tradisional seperti PNG atau SVG.
Ia sering digunakan dalam reka bentuk web untuk menambah elemen visual pada tapak web tanpa bergantung pada fail imej.
Terdapat beberapa kaedah biasa untuk mencipta ikon CSS:

Ikon Fon:
Ini ialah ikon yang dicipta daripada fon ikon khas seperti Font Hebat, Ikon Bahan atau ikon Ion. Fon ini mengandungi set glyph (simbol) yang boleh digayakan dengan CSS.
Sebagai contoh
anda mungkin menggunakan kelas seperti .fa-heart untuk menambahkan ikon hati pada HTML anda, kemudian menggayakannya dengan sifat CSS.
Bentuk CSS:
Ikon boleh dibuat menggunakan CSS tulen dengan menggayakan elemen HTML (seperti

, , dll.) dengan sifat CSS seperti sempadan, jejari sempadan, latar belakang dan transformasi. Kaedah ini selalunya digunakan untuk bentuk geometri mudah atau reka bentuk tersuai.
Ikon CSS menawarkan beberapa kelebihan, termasuk kebolehskalaan, kemudahan penyesuaian dan saiz fail yang berpotensi lebih kecil berbanding imej. Ia boleh menjadi cara yang serba boleh dan cekap untuk menambah elemen visual pada reka bentuk web anda.
Fon Hebat
Sertakan Font Awesome dalam projek anda:
Tambahkan baris ini pada HTML anda:

Salin selepas log masuk

Gunakan ikon
Untuk menggunakan ikon, tambahkanatauelemen dengan kelas yang sesuai:

Salin selepas log masuk

Ikon Bahan
Sertakan Ikon Bahan dalam projek anda:
Tambahkan baris ini pada
HTML anda:

Salin selepas log masuk

Gunakan ikon
Untuk menggunakan ikon, tambahkanelemen dengan ikon bahan kelas dan nama ikon:

Salin selepas log masuk

2. Menggunakan CSS untuk Ikon Tersuai
Anda juga boleh mencipta ikon anda sendiri dengan CSS. Berikut ialah contoh mudah menggunakan CSS tulen:
Buat struktur HTML asas

Salin selepas log masuk

Tambah CSS untuk menggayakan ikon anda

.icon-star { display: inline-block; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid gold; position: relative; transform: rotate(35deg); } .icon-star:before { content: ''; position: absolute; top: 0; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid gold; transform: rotate(-70deg); }

Salin selepas log masuk

Coretan CSS ini mencipta bentuk bintang mudah menggunakan jidar dan kedudukan.
3. Ikon SVG
Anda juga boleh menggunakan SVG untuk ikon berkualiti tinggi:
Sebaris SVG

Salin selepas log masuk

Menggunakan SVG sebagai imej latar belakang

.icon { width: 24px; height: 24px; background: url('data:image/svg+xml;base64,...') no-repeat center center; background-size: contain; }

Salin selepas log masuk

Petua
Saiz dan Warna: Untuk ikon fon dan SVG sebaris, anda boleh melaraskan saiz dengan saiz fon atau sifat lebar dan ketinggian, dan menukar warna dengan warna atau isi untuk SVG.
Kebolehaksesan: Sentiasa pertimbangkan kebolehaksesan dengan menambahkan teks deskriptif atau atribut aria jika perlu.
Jangan ragu untuk mencuba dan campurkan kaedah yang berbeza untuk mencari kaedah yang paling sesuai untuk projek anda!
Atas ialah kandungan terperinci Ikon CSS dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!