Cara Menggunakan Perpustakaan Ikon Bootstrap

Perpustakaan Ikon Bootstrap menyediakan pelbagai ikon yang indah dan ringkas yang boleh ditambah dengan mudah ke projek anda. Langkah -langkah termasuk: Pasang bootstrap untuk menambah CDN atau masukkannya dalam ikon penggunaan HTML () untuk menyesuaikan saiz dan warna ikon (menggunakan kelas CSS)

Cara Menggunakan Perpustakaan Ikon Bootstrap dalam Projek

Perpustakaan Ikon Bootstrap adalah koleksi ikon besar yang mudah dan indah yang boleh ditambah kepada projek bootstrap. Inilah cara menggunakannya:

Langkah 1: Pasang bootstrap

Pasang bootstrap dengan cara berikut:

 <code class="bash">npm install bootstrap</code>

Langkah 2: Tambahkan CDN atau masukkannya di HTML anda

Dalam fail HTML anda, sertakan CDN Perpustakaan Ikon Bootstrap:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"></code>

Atau, masukkannya dalam fail HTML anda:

 <code class="html"><link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css"></code>

Langkah 3: Gunakan ikon

Di HTML anda, tambahkan ikon menggunakan sintaks berikut:

 <code class="html"><i class="bi bi-icon-name"></i></code>

Sebagai contoh, untuk menambah ikon rumah, gunakan:

 <code class="html"><i class="bi bi-house"></i></code>

Sesuaikan saiz dan warna ikon

Anda boleh menggunakan kelas CSS untuk menyesuaikan saiz dan warna ikon:

saiz:

• bi-1x : Kecil
• bi-2x : saiz sederhana
• bi-3x : saiz besar
• bi-4x : saiz tambahan yang lebih besar

warna:

• bi-primary : Biru
• bi-secondary : kelabu
• bi-success : Hijau
• bi-danger : Merah
• bi-warning : Kuning
• bi-info : Biru

Sebagai contoh, untuk menambah ikon rumah biru besar, gunakan:

 <code class="html"><i class="bi bi-house bi-3x bi-primary"></i></code>

Petunjuk:

• Pastikan anda menggunakan nama ikon yang betul. Senarai lengkap ikon boleh didapati di laman web rasmi Bootstrap.
• Anda boleh mengatasi gaya ikon lalai dalam CSS tersuai anda.
• Terdapat kelas utiliti berguna lain di perpustakaan ikon, seperti bi-border-rounded dan bi-flip-horizontal .

Atas ialah kandungan terperinci Cara Menggunakan Perpustakaan Ikon Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!