Bagaimanakah Saya Boleh Menukar Warna Ikon Butang Navbar Bootstrap 4?

Cara Menyesuaikan Warna Ikon Butang Navbar Bootstrap 4

Bootstrap 4 menggunakan imej latar belakang SVG yang unik untuk ikon navbar-togglernya (hamburger). Ikon ini terdapat dalam dua variasi: satu untuk bar navigasi latar belakang terang dan satu lagi untuk bar navigasi latar belakang gelap.

Menyesuaikan Warna Ikon

Jika warna hitam atau putih lalai tidak sesuai dengan reka bentuk anda, anda boleh menyesuaikan warna ikon. Sebagai contoh, untuk menukarnya kepada merah jambu, laraskan nilai strok dalam data SVG, seperti yang dilihat di bawah:

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

Sebagai alternatif, Menggunakan Pustaka Ikon Pihak Ketiga

Anda juga boleh menggantikan ikon lalai dengan ikon daripada pustaka pihak ketiga, seperti Font Awesome. Pendekatan ini memberikan lebih fleksibiliti dan kawalan ke atas penampilan ikon.

Perubahan dalam Bootstrap 4.0.0

Dalam Bootstrap 4 Beta, kelas songsang navbar telah digantikan dengan navbar-gelap. Kelas ini bertujuan untuk digunakan dengan bar navigasi berlatar belakang yang lebih gelap dan menghasilkan pautan yang lebih terang dan warna togol.

Sumber Tambahan

• [Menukar Bootstrap 4 Navbar Warna](https://getbootstrap.com/docs/4.0/components/navbar/#how-to-change-navbars-colors)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Ikon Butang Navbar Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!