Bootstrap 4 Navbar 햄버거 메뉴 아이콘 색상을 어떻게 사용자 정의합니까?

Bootstrap 4 Navbar 버튼 아이콘 색상 사용자 정의

Bootstrap 4에서는 화면 크기가 992px 미만일 때 햄버거 토글러 버튼이 나타납니다. 색상을 사용자 정의하려면 navbar-toggler-icon 클래스를 활용할 수 있습니다.

Navbar 색상 컨텍스트:

햄버거 토글러 아이콘에는 두 개의 배경 이미지가 있습니다.

• Navbar-light: 조명을 위한 흰색 아이콘 배경.
• Navbar-dark: 어두운 배경의 검정색 아이콘.

아이콘 색상 변경:

기본 색상을 재정의하려면 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");
}

이 CSS는 아이콘 색상을 분홍색으로 설정합니다. 아이콘 색상을 결정하는 SVG 데이터의 획 속성을 참고하세요.

추가 스타일 지정:

아이콘 테두리를 아이콘 색상과 일치시키려면 다음 스타일:

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

대체 접근 방식:

또는 Font Awesome과 같은 외부 라이브러리의 아이콘을 사용하고 독립적으로 스타일을 지정할 수 있습니다.

Bootstrap 4.0.0 업데이트:

Bootstrap 4.0.0에서는 navbar-inverse의 이름이 다음으로 변경되었습니다. navbar-dark 배경이 어두운 navbar에 사용됩니다.

추가 사용자 정의 옵션:

Bootstrap 4 navbar 색상 사용자 정의에 대한 자세한 내용은 공식 문서를 참조하세요. : https://getbootstrap.com/docs/4.0/comComponents/navbar/#colors

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