Bootstrap 4 Navbar 햄버거 아이콘 색상을 어떻게 변경할 수 있습니까?-CSS 튜토리얼-php.cn

Bootstrap 4 Navbar 햄버거 아이콘 색상을 어떻게 변경할 수 있습니까?

Susan Sarandon

풀어 주다： 2024-12-12 17:47:15

원래의

494명이 탐색했습니다.

How Can I Change the Bootstrap 4 Navbar Hamburger Icon Color?

Bootstrap 4 Navbar 버튼 아이콘 색상 변경

Bootstrap 4에는 다음에서 볼 수 있는 더 작은 화면 크기를 위한 햄버거 메뉴 아이콘이 있습니다. 코드:

<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>

로그인 후 복사

이 아이콘은 어두운 바탕에 흰색으로 표시됩니다. 배경은 밝은 배경에 어둡습니다. 그러나 디자인 비전에 맞게 색상을 조정하고 싶을 수도 있습니다.

아이콘 사용자 정의

아이콘 색상을 사용자 정의하기 위해 Bootstrap 4는 SVG 배경 이미지를 사용합니다. . navbar 배경색에 따라 다양한 SVG가 사용됩니다.

.navbar-light .navbar-toggler-icon: 밝은 배경에 불투명도가 50%인 검은색 아이콘
.navbar-dark .navbar-toggler-icon: 어두운 경우 불투명도가 50%인 흰색 아이콘 배경

예를 들어 아이콘 색상을 분홍색으로 변경하려면 다음 CSS를 사용하세요.

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

로그인 후 복사

대체 접근 방식

아이콘을 사용자 정의하는 대신 Font Awesome과 같은 다른 아이콘 라이브러리를 사용하는 것입니다. 이는 아이콘 모양에 대한 더 많은 유연성과 제어를 제공합니다.

위 내용은 Bootstrap 4 Navbar 햄버거 아이콘 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!