Jadual Kandungan
Sertakan ikon bootstrap melalui CDN
Pasang melalui NPM (untuk aliran kerja moden)
Gunakan SVG secara langsung (disyorkan untuk prestasi)
Sesuaikan saiz dan warna ikon
Rumah hujung hadapan web Tutorial Bootstrap Bagaimana cara menggunakan ikon bootstrap dalam projek anda?

Bagaimana cara menggunakan ikon bootstrap dalam projek anda?

Sep 30, 2025 am 08:49 AM
Cara menggunakan

  • Ikon bootstrap boleh digunakan tanpa bootstrap penuh melalui CDN, NPM, atau SVG. 2. Pautan CDN di kepala HTML untuk kegunaan cepat dengan tag dan kelas i. 3. Pasang melalui NPM untuk membina sistem dan import CSS. 4. Gunakan SVG langsung untuk prestasi dan penyesuaian terbaik. 5. Sesuaikan saiz dan warna dengan CSS atau atribut.
  • Bagaimana cara menggunakan ikon bootstrap dalam projek anda?

    Untuk menggunakan ikon bootstrap dalam projek anda, anda tidak perlu memasang kerangka bootstrap penuh. Ikon Bootstrap adalah mandiri dan boleh ditambah dengan mudah menggunakan rujukan CDN, NPM, atau SVG langsung. Berikut adalah cara anda boleh memasukkan dan menggunakannya dengan berkesan.

    Sertakan ikon bootstrap melalui CDN

    Cara terpantas untuk mula menggunakan ikon bootstrap adalah dengan menghubungkan fail CSS dari CDN di bahagian HTML anda:

    Sebaik sahaja dihubungkan, anda boleh menggunakan ikon mana -mana dengan menambahkan tag saya dengan kelas yang sesuai:

    Ini akan memaparkan ikon jantung. Gantikan Bi-Heart dengan nama ikon bootstrap lain (selalu diawali dengan bi- ).

    Pasang melalui NPM (untuk aliran kerja moden)

    Jika anda menggunakan sistem binaan seperti Webpack atau Vite, pasang ikon bootstrap melalui NPM:

    NPM Pasang Bootstrap-Icons

    Kemudian import CSS font dalam fail utama JavaScript atau SCSS anda:

    @import '~ bootstrap-icons/font/bootstrap-icons.css';

    Pastikan bundler anda dikonfigurasi untuk mengendalikan fon dan CSS untuk memuatkan yang betul.

    Gunakan SVG secara langsung (disyorkan untuk prestasi)

    Untuk kawalan yang lebih baik, saiz bundle yang lebih kecil, dan tiada pergantungan font web, gunakan SVG individu secara langsung. Anda boleh menyalin kod SVG dari laman web Ikon Bootstrap rasmi .

    Contoh:

    Kaedah ini memberikan masa beban yang lebih cepat dan membolehkan penyesuaian mudah dengan CSS atau atribut sebaris.

    Sesuaikan saiz dan warna ikon

    Anda boleh menyesuaikan penampilan menggunakan CSS standard. Untuk kelas ikon, gunakan saiz font atau utiliti saiz bootstrap:

    Dengan SVG, tetapkan lebar, ketinggian, dan isi secara langsung:

    Pada dasarnya hanya memilih kaedah yang sesuai dengan persediaan projek anda - CDN untuk kemenangan cepat, SVGs untuk prestasi dan kawalan.

    Atas ialah kandungan terperinci Bagaimana cara menggunakan ikon bootstrap dalam projek anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan Laman Web ini
    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

    Alat AI Hot

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Stock Market GPT

    Stock Market GPT

    Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Mar 15, 2024 am 08:31 AM

    Alat pembaikan DirectX ialah alat sistem profesional Fungsi utamanya adalah untuk mengesan status DirectX sistem semasa Jika keabnormalan ditemui, ia boleh dibaiki secara langsung. Mungkin terdapat ramai pengguna yang tidak tahu cara menggunakan alat pembaikan DirectX Mari kita lihat tutorial terperinci di bawah. 1. Gunakan perisian alat pembaikan untuk melakukan pengesanan pembaikan. 2. Jika ia menggesa bahawa terdapat masalah tidak normal dalam komponen C++ selepas pembaikan selesai, sila klik butang Batal dan kemudian klik bar menu Alat. 3. Klik butang Pilihan, pilih sambungan, dan klik butang Mulakan Sambungan. 4. Selepas pengembangan selesai, mengesan semula dan membaikinya. 5. Jika masalah masih tidak diselesaikan selepas operasi alat pembaikan selesai, anda boleh cuba menyahpasang dan memasang semula program yang melaporkan ralat.

    Cara menggunakan potplayer-Cara menggunakan potplayer Cara menggunakan potplayer-Cara menggunakan potplayer Mar 04, 2024 pm 06:10 PM

    Potplayer ialah pemain media yang sangat berkuasa, tetapi ramai rakan masih tidak tahu cara menggunakan potplayer Hari ini saya akan memperkenalkan cara menggunakan potplayer secara terperinci, dengan harapan dapat membantu semua orang. 1. Kekunci pintasan PotPlayer Kekunci pintasan biasa untuk pemain PotPlayer adalah seperti berikut: (1) Main/jeda: ruang (2) Kelantangan: roda tetikus, kekunci anak panah atas dan bawah (3) ke hadapan/belakang: anak panah kiri dan kanan. kekunci (4) penanda halaman: P- Tambah penanda halaman, H-Lihat penanda halaman (5) Skrin penuh/pulihkan: Masukkan (6) Kelajuan: C-pecut, 7) Bingkai sebelumnya/seterusnya: D/

    Pengenalan kepada kod status HTTP 525: teroka definisi dan aplikasinya Pengenalan kepada kod status HTTP 525: teroka definisi dan aplikasinya Feb 18, 2024 pm 10:12 PM

    Pengenalan kepada kod status HTTP 525: Fahami definisi dan penggunaan kod status HTTP (HypertextTransferProtocol) 525 bermakna pelayan mempunyai ralat semasa proses jabat tangan SSL, mengakibatkan ketidakupayaan untuk mewujudkan sambungan selamat. Pelayan mengembalikan kod status ini apabila ralat berlaku semasa jabat tangan Keselamatan Lapisan Pengangkutan (TLS). Kod status ini termasuk dalam kategori ralat pelayan dan biasanya menunjukkan konfigurasi pelayan atau masalah persediaan. Apabila pelanggan cuba menyambung ke pelayan melalui HTTPS, pelayan tidak mempunyai

    Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Mar 04, 2024 pm 09:28 PM

    Ramai rakan masih tidak tahu cara menggunakan Baidu Netdisk, jadi editor akan menerangkan cara menggunakan Baidu Netdisk di bawah Jika anda memerlukan, cepat dan lihat. Langkah 1: Log masuk terus selepas memasang Baidu Netdisk (seperti yang ditunjukkan dalam gambar Langkah 2: Kemudian pilih "Perkongsian Saya" dan "Senarai Pemindahan" mengikut arahan halaman (seperti yang ditunjukkan dalam gambar); Perkongsian Rakan", anda boleh berkongsi gambar dan fail terus dengan rakan (seperti yang ditunjukkan dalam gambar); Langkah 4: Kemudian pilih "Kongsi" dan kemudian pilih fail komputer atau fail cakera rangkaian (seperti yang ditunjukkan dalam gambar); Langkah Kelima 1: Kemudian anda boleh mencari rakan (seperti yang ditunjukkan dalam gambar) Langkah 6: Anda juga boleh mencari fungsi yang anda perlukan dalam "Function Treasure Box" (seperti yang ditunjukkan dalam gambar). Perkara di atas adalah pendapat editor

    Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Mar 18, 2024 am 11:07 AM

    Alat Pengaktifan KMS ialah alat perisian yang digunakan untuk mengaktifkan produk Microsoft Windows dan Office. KMS ialah singkatan kepada KeyManagementService, iaitu perkhidmatan pengurusan utama. Alat pengaktifan KMS mensimulasikan fungsi pelayan KMS supaya komputer boleh menyambung ke pelayan KMS maya untuk mengaktifkan produk Windows dan Office. Alat pengaktifan KMS bersaiz kecil dan berkuasa dalam fungsi Ia boleh diaktifkan secara kekal dengan satu klik Ia boleh mengaktifkan mana-mana versi sistem tetingkap dan mana-mana versi perisian Office tanpa disambungkan ke Internet dan alat pengaktifan Windows yang kerap dikemas kini Hari ini saya akan memperkenalkannya Biar saya memperkenalkan kepada anda kerja pengaktifan kms

    Cara menggunakan alat pengaktifan Xiaoma win7 - Cara menggunakan alat pengaktifan Xiaoma win7 Cara menggunakan alat pengaktifan Xiaoma win7 - Cara menggunakan alat pengaktifan Xiaoma win7 Mar 04, 2024 pm 06:16 PM

    Saya percaya bahawa ramai pengguna menggunakan alat pengaktifan Xiaoma win7, tetapi adakah anda tahu cara menggunakan alat pengaktifan Xiaoma win7 Kemudian, editor akan membawakan kepada anda cara menggunakan alat pengaktifan Xiaoma win7 Bagi mereka yang berminat dengan ini? sila ke artikel berikut Jom lihat. Langkah pertama ialah pergi ke "Komputer Saya" selepas memasang semula sistem, klik "System Properties" di menu atas, dan semak status pengaktifan Windows. Dalam langkah kedua, klik untuk memuat turun alat pengaktifan win7 dalam talian dan klik untuk membukanya (terdapat banyak sumber tersedia di mana-mana). Langkah ketiga ialah membuka alat pengaktifan Xiaoma dan klik "Aktifkan Windows secara kekal". Langkah keempat ialah menunggu proses pengaktifan selesai pengaktifan. Langkah 5: Semak status pengaktifan Windows sekali lagi dan ketahui bahawa sistem telah diaktifkan.

    Cara menggabungkan sel menggunakan kekunci pintasan Cara menggabungkan sel menggunakan kekunci pintasan Feb 26, 2024 am 10:27 AM

    Cara menggunakan kekunci pintasan untuk menggabungkan sel Dalam kerja harian, kita selalunya perlu mengedit dan memformat jadual. Menggabungkan sel ialah operasi biasa yang boleh menggabungkan berbilang sel bersebelahan ke dalam satu sel untuk meningkatkan keindahan jadual dan kesan paparan maklumat. Dalam perisian hamparan arus perdana seperti Microsoft Excel dan Helaian Google, operasi penggabungan sel adalah sangat mudah dan boleh dicapai melalui kekunci pintasan. Berikut akan memperkenalkan penggunaan kekunci pintasan untuk menggabungkan sel dalam kedua-dua perisian ini. wujud

    Apakah PyCharm? Pengenalan fungsi dan penerangan terperinci tentang penggunaan Apakah PyCharm? Pengenalan fungsi dan penerangan terperinci tentang penggunaan Feb 20, 2024 am 09:21 AM

    PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python profesional yang dibangunkan oleh JetBrains Ia menyediakan pembangun Python dengan fungsi dan alatan yang berkuasa, menjadikan penulisan kod Python lebih cekap dan mudah. PyCharm menyokong berbilang sistem pengendalian, termasuk Windows, macOS dan Linux, dan juga menyokong berbilang versi Python, dan menyediakan pelbagai fungsi pemalam dan sambungan untuk memudahkan pembangun menyesuaikan persekitaran IDE mengikut keperluan mereka sendiri. P

    See all articles