В этой статье блога мы рассмотрим различные способы изменения цвета значка кнопки панели навигации Bootstrap 4. Значок кнопки на панели навигации, также известный как значок гамбургера, обычно используется в адаптивном веб-дизайне для переключения меню навигации на мобильных устройствах. Мы предоставим примеры кода для каждого метода, которые помогут вам настроить цвет значков в соответствии с дизайном вашего веб-сайта. Давайте погрузимся!

Методы изменения цвета значка кнопки навигационной панели Bootstrap 4:

1. Метод с использованием CSS:
   Вы можете изменить цвет значка кнопки панели навигации, указав ее класс CSS. Добавьте в таблицу стилей следующий код CSS:

.navbar-toggler-icon {
    color: #ff0000;  /* Replace #ff0000 with your desired color code */
}

1. Метод с использованием служебных классов Bootstrap:
   Bootstrap предоставляет служебные классы, которые позволяют изменять различные аспекты его компонентов. Чтобы изменить цвет значка кнопки панели навигации, добавьте нужный класс цвета к элементу <button>. Например:

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

В приведенном выше примере мы добавили класс text-dangerк элементу <span>, чтобы изменить цвет значка на красный.

1. Метод с использованием псевдоэлементов CSS:
   Вы также можете использовать псевдоэлементы CSS для настройки цвета значка кнопки панели навигации. Добавьте в таблицу стилей следующий код CSS:

.navbar-toggler-icon::before {
    color: #00ff00;  /* Replace #00ff00 with your desired color code */
}

1. Метод с использованием значков Font Awesome:
   Если вы используете значки Font Awesome в своем проекте, вы можете изменить цвет значка кнопки панели навигации, применив соответствующие классы Font Awesome. Сначала добавьте CSS Font Awesome в свой HTML-файл:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Затем измените элемент <span>следующим образом:

<span class="navbar-toggler-icon fa fa-bars" ></span>

В приведенном выше примере мы добавили классы faи fa-barsк элементу <span>и установили встроенный цвет с помощью 12.

Изменение цвета значка кнопки на панели навигации Bootstrap 4 необходимо для настройки внешнего вида навигационного меню вашего веб-сайта. В этой статье мы рассмотрели несколько методов достижения этой цели, включая модификации CSS, служебные классы Bootstrap, псевдоэлементы CSS и значки Font Awesome. Используя эти методы, вы можете легко интегрировать цвет значка кнопки на панели навигации с общим дизайном веб-сайта.