Bagaimanakah Saya Boleh Menukar Warna Ikon Hamburger Bootstrap 4 Navbar?

Menukar Warna Ikon Butang Navbar Bootstrap 4

Bootstrap 4 menampilkan ikon menu hamburger untuk saiz skrin yang lebih kecil, yang boleh dilihat dalam perkara berikut kod:

<button class="navbar-toggler navbar-toggler-right"
        type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Ikon ini dipaparkan sama ada putih pada latar belakang gelap atau gelap pada latar belakang yang terang. Walau bagaimanapun, anda mungkin ingin melaraskan warnanya agar sesuai dengan penglihatan reka bentuk anda.

Menyesuaikan Ikon

Untuk menyesuaikan warna ikon, Bootstrap 4 menggunakan imej latar belakang SVG . SVG yang berbeza digunakan berdasarkan warna latar belakang bar navigasi.

• .navbar-light .navbar-toggler-icon: Ikon hitam dengan kelegapan 50% untuk latar belakang terang
• .navbar-dark .navbar-toggler-icon: Ikon putih dengan kelegapan 50% untuk gelap latar belakang

Untuk menukar warna ikon kepada merah jambu, contohnya, gunakan CSS berikut:

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

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

Pendekatan Alternatif

An alternatif untuk menyesuaikan ikon adalah dengan menggunakan perpustakaan ikon yang berbeza, seperti Font Awesome. Ini memberikan lebih fleksibiliti dan kawalan ke atas penampilan ikon.

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