Ikon CSS dengan contoh-tutorial css-php.cn

Ikon CSS dengan contoh

王林

Lepaskan： 2024-07-30 22:56:43

asal

848 orang telah melayarinya

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 (seperti atau ).
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 satu set glyph (simbol) yang boleh digayakan dengan CSS.

Contohnya

anda mungkin menggunakan kelas seperti .fa-heart untuk menambahkan ikon hati pada HTML anda dan 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 Hebat dalam projek anda:
Tambahkan baris ini pada HTML anda:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Salin selepas log masuk

Gunakan ikon

Untuk menggunakan ikon, tambahkan atau elemen dengan kelas yang sesuai:

<i class="fas fa-camera"></i>
Salin selepas log masuk

Ikon Bahan

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

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Salin selepas log masuk

Gunakan ikon

Untuk menggunakan ikon, tambahkan elemen dengan ikon bahan kelas dan nama ikon:

<i class="material-icons">camera_alt</i>
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

<div class="icon-star"></div>
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:

SVG Sebaris

<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7v10l10 5 10-5V7z"/> </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 tinggi serta 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!