Ikon CSS dengan contoh

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">

Gunakan ikon

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

<i class="fas fa-camera"></i>

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">

Gunakan ikon

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

<i class="material-icons">camera_alt</i>

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>

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);
}

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>

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;
}

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!

css html for include using class this border background transform

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn