Bagaimana Saya Menyesuaikan Warna Ikon Menu Hamburger Bootstrap 4 Navbar?

Menyesuaikan Warna Ikon Butang Navbar Bootstrap 4

Dalam Bootstrap 4, butang togol hamburger muncul apabila saiz skrin di bawah 992px. Untuk menyesuaikan warnanya, anda boleh menggunakan kelas navbar-toggler-icon.

Navbar Color Context:

Ikon toggler hamburger mempunyai dua imej latar belakang:

• Navbar-light: Ikon putih untuk cahaya latar belakang.
• Navbar-dark: Ikon hitam untuk latar belakang gelap.

Menukar Warna Ikon:

Untuk mengatasi warna lalai, anda boleh menyesuaikan ikon melalui CSS. Berikut ialah contoh:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

CSS ini menetapkan warna ikon kepada merah jambu. Perhatikan atribut strok dalam data SVG, yang menentukan warna ikon.

Penggayaan Tambahan:

Untuk memadankan jidar ikon dengan warna ikon, anda boleh menambah gaya berikut:

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

Alternatif Pendekatan:

Sebagai alternatif, anda boleh menggunakan ikon daripada perpustakaan luaran, seperti Font Awesome, dan menggayakannya secara bebas.

Dikemas kini untuk Bootstrap 4.0.0:

Dalam Bootstrap 4.0.0, navbar-inverse telah dinamakan semula kepada navbar-dark untuk digunakan pada navbar dengan latar belakang gelap.

Pilihan Penyesuaian Tambahan:

Untuk maklumat lebih terperinci tentang menyesuaikan warna navbar Bootstrap 4, sila rujuk dokumentasi rasmi : https://getbootstrap.com/docs/4.0/components/navbar/#colors

Atas ialah kandungan terperinci Bagaimana Saya Menyesuaikan Warna Ikon Menu Hamburger Bootstrap 4 Navbar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!