如何更改 Bootstrap 4 導覽列按鈕圖示顏色？

如何自訂Bootstrap 4 導覽列按鈕圖示顏色

Bootstrap 4 採用獨特的SVG 背景圖片作為其導覽列切換圖示（漢堡）。此圖示有兩種變體：一種用於淺色背景導覽欄，另一種用於深色背景導覽列。

自訂圖示顏色

如果預設為黑色或白色不適合您的設計，您可以自訂圖示的顏色。例如，要將其變更為粉紅色，請調整SVG 資料中的筆劃值，如下所示：

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

或者，使用第三方圖示庫

您也可以將預設圖標替換為第三方庫中的圖標，例如Font Awesome。這種方法提供了對圖示外觀的更大靈活性和控制。

Bootstrap 4.0.0 中的變更

在 Bootstrap 4 Beta 中，navbar-inverse 類別已替換為導覽列-黑暗。此類旨在與較暗背景的導覽列一起使用，並產生較淺的連結和切換器顏色。

其他資源

• [更改Bootstrap 4 導覽列顏色](https://getbootstrap.com/docs/4.0/components/navbar/#how -to-change-navbars-colors)

以上是如何更改 Bootstrap 4 導覽列按鈕圖示顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！