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

Bootstrap 4 Navbar 버튼 아이콘 색상을 사용자 정의하는 방법

Bootstrap 4는 navbar-toggler-icon에 고유한 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 클래스가 다음으로 대체되었습니다. navbar-dark. 이 클래스는 더 어두운 배경의 navbar와 함께 사용하도록 고안되었으며 더 밝은 링크 및 토글러 색상을 생성합니다.

추가 리소스

• [Changing Bootstrap 4 Navbar 색상](https://getbootstrap.com/docs/4.0/comComponents/navbar/#how-to-change-navbars-colors)

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