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

Bootstrap 4 Navbar 버튼 아이콘 색상 수정

햄버거 아이콘으로 표시되는 Bootstrap 4의 Navbar 토글러 아이콘은 SVG 배경 이미지를 활용합니다. . 아이콘 이미지에는 두 가지 변형이 있습니다. 하나는 밝은 배경용이고 다른 하나는 어두운 배경용입니다.

토글러의 색상을 지정하려면 다음 클래스를 활용할 수 있습니다.

• navbar -dark: 더 어두운 곳에 밝은/흰색 토글러를 표시합니다. backgrounds.
• navbar-light: 밝은 배경에 어두운/회색 토글러를 표시합니다.

그러나 토글러의 색상을 추가로 사용자 정의하려면 사용자 정의 아이콘을 만들 수 있습니다. 예를 들어 아래 코드 조각은 SVG 데이터의 스트로크='rgba(255,102,203, 0.5)' 값을 사용하여 토글러 색상을 분홍색(255, 102, 203)으로 설정합니다.

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

실시간 시연을 보려면 다음을 참조하세요. http://www.codeply.com/go/4FdZGlPMNV.

또는 Font Awesome과 같은 외부 라이브러리의 아이콘을 사용할 수도 있습니다.

Bootstrap 4 베타부터 navbar-inverse 클래스가 navbar-dark로 대체되었습니다. 배경이 더 어두운 탐색 모음으로 인해 링크 및 토글러 색상이 더 밝아졌습니다.

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