Bootstrap 4 햄버거 토글 러 색상 변경

125

화면 크기가 992px보다 작을 때 햄버거 토글 러가 추가되는 부트 스트랩 웹 사이트가 있습니다. 코드는 다음과 같습니다.

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

햄버거 토글 버튼의 ​​색상을 변경할 수 있습니까?

css  twitter-bootstrap  bootstrap-4 
— Rehan
소스
2
bootply에서와 같이 코드가 실행되지 않습니다
— Jordan.JD
실제로 답은 아니지만 advertentiekracht.nl/togglerIcon.html 에서 navbar-toggler-icon을 가지고 놀 수 있습니다. 부트 스트랩 toggler-icon은 부트 스트랩 스타일 시트를 참조하는 대신 외부 스타일 요소로 사용됩니다. 이를 관리하는 방법도 설명되어 있습니다.
— ben Thijssen

답변:

245

navbar-toggler-iconBootstrap 4 의 (햄버거)는 SVG를 사용합니다 background-image. 토글 러 아이콘 이미지에는 2 개의 "버전"이 있습니다. 하나는 밝은 탐색 모음 용이고 다른 하나는 어두운 탐색 모음 용 ...

  • navbar-dark어두운 배경에서 밝은 / 흰색 토글 러에 사용
  • navbar-light밝은 배경에서 어두운 / 회색 토글 러에 사용
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

따라서 토글 러 이미지의 색상을 다른 것으로 변경하려는 경우 아이콘을 사용자 정의 할 수 있습니다. 예를 들어 여기에서는 RGB 값을 분홍색 (255,102,203)으로 설정했습니다. stroke='rgba(255,102,203, 0.5)'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");
}

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

데모 http://www.codeply.com/go/4FdZGlPMNV

OFC, 다른 라이브러리의 아이콘 만 사용하는 또 다른 옵션, 즉 Font Awesome 등.

Bootstrap 4.0.0 업데이트 :

부트 스트랩 4 베타로, navbar-inverse지금 navbar-dark가볍고 링크 toggler 색상을 생산하기 위해 어두운 배경 색상으로 navbars에 사용할 수 있습니다.

Bootstrap 4 Navbar 색상을 변경하는 방법

— 짐
소스
2
부트 스트랩 4 베타 1에는 .navbar-inverse클래스 가 없습니다 . 두 가지 클래스 중에서 선택할 수 있습니다 : .navbar-light또는 .navbar-dark.
— Qrzysio
55

용도 글꼴 멋진 아이콘을 사용자의 네비게이션 바의 기본 아이콘으로.

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

또는 오래된 글꼴 멋진 버전에서 이것을 시도하십시오.

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— 아미 레자 모하마디
소스
3
fontawesome 5의 경우 막대를 사용하십시오. fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri 2010 년
아주 좋은 생각입니다.
— Shiva Manhar 19
7

매우 쉬운 방법으로 만 CSS로 토글 러 버튼을 만들 수 있습니다. SVG 또는 ... foramt에서 글꼴을 사용할 필요가 없습니다.

귀하의 버튼 :

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

버튼 스타일 :

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

수평선 스타일 :

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

데모

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>
스 니펫 확장

— Ghafor Sabury
소스
5

클래스 navbar-dark또는 navbar-lightnav 요소를 삽입 하십시오.

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
— 타이 안 응 우옌
소스
4

가장 쉬운 방법은이 기본 부트 스트랩 코드를 바꾸는 것입니다.

<button class="navbar-toggler" 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>

이로 인해 :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

이 코드도 파일에 추가하는 것을 잊지 마십시오.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

도움이 되었기를 바랍니다 !!

— Prateek Gupta
소스
3

부트 스트랩을 다운로드 한 경우 bootstrap-4.4.1-dist / css / bootstrap.min으로 이동하십시오.

나는. .navbar-light .navbar-toggler-icon또는 .navbar-dark .navbar-toggler-icon선택기 찾기

ii. background-image 속성과 그 값을 선택합니다. 스 니펫은 다음과 같습니다.

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
스 니펫 확장

iii. 스 니펫을 복사하여 맞춤 CSS에 붙여 넣으세요.

iv. stroke=’rgba(0,0,0,0.5)’값을 선호하는 rgba 값으로 변경하십시오.

— 에요 압
소스
2

편집 : 내 나쁜! 내 대답으로 아이콘이 토글 러로 작동하지 않습니다. 실제로 축소되지 않은 상태에서도 표시됩니다 ... 계속 검색 중 ...

이것은 작동합니다.

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

내 대답에서 제안한 트릭은을 navbar-toggler클래식 버튼 클래스 로 대체 btn한 다음 앞에서 대답했듯이 아이콘 글꼴을 사용하는 것입니다.

을 유지 <button class="navbar-toggler">하면 버튼이 "이상한"모양이됩니다.

github 에 대한이 게시물에서 언급했듯이 부트 스트랩은 "css 속임수"를 사용하므로 사용자는 글꼴에 의존 할 필요가 없습니다.

따라서 "navbar-toggler"아이콘 글꼴을 사용하려면 버튼 의 클래스를 사용하지 마십시오 .

건배.

— Stockersky
소스
Bootstrap의 일부가 아닌 Font Awesome을 사용하는 경우에만 "작동"합니다.
— Zim
목록에서 Amirreza Mohammadi가 제공 한 답변에 대한 주석을 제거해야한다고 생각합니다. 감사.
— NoChance
2

방금 훨씬 더 쉬운 솔루션을 개발했습니다. (예, 이것이 오래된 질문이라는 것을 알고 있지만 동일한 문제를 조사하는 누군가가 유용하다고 생각할 수 있습니다.)

hamburger.svg라는 SVG를 사용하고있었습니다. 텍스트 편집기로 봤는데 세 줄의 색상을 설정하는 항목을 찾을 수 없었습니다. 기본적으로 검은 색으로 설정되어있는 것 같습니다. 이것이 제가받는 동작이기 때문입니다. 그래서 간단히 "stroke"매개 변수를 추가했습니다. SVG의 정의. 그것은 QUITE 작동하지 않았습니다. 세 선의 테두리는 제가 선택한 색상 (흰색) 이었지만 나머지 선은 여전히 ​​검은 색 이었으므로 "fill"매개 변수도 추가했습니다. 그리고 그게 트릭이었습니다!

다음은 원본 hamburger.svg의 전체 코드입니다.

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

다음은 새 SVG를 편집하고 hamburger_white.svg로 저장 한 후의 코드입니다.

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

오른쪽으로 스크롤하면 알 수 있듯이 추가 한 작업은 다음과 같습니다. 

stroke="white" fill="white"

경로의 끝까지. 내가해야 할 또 다른 일은 HTML에서 햄버거의 파일 이름을 변경하는 것입니다. CSS를 전혀 망칠 필요가 없으며 다른 아이콘을 추적 할 필요가 없습니다.

쉬운! 이것을 모방하여 햄버거를 원하는 색상으로 만들 수 있습니다.

— 헨리
소스
1

sass 버전의 부트 스트랩으로 작업하는 경우 토글 버튼의 ​​색상과 스타일을 _variables.scss찾 $navbar-inverse-toggler-bg거나 $navbar-light-toggler-bg변경할 수 있습니다.

html에서는 사용 navbar-inverse하거나 navbar-light사용하려는 버전에 따라 사용해야합니다.

— 네 데코
소스
navbar-light와 관련하여 부트 스트랩 4에서 작동하지 않습니다
— botbot
1

대안으로 다음과 같은 다른 아이콘을 사용하여 항상 더 간단한 해결 방법을 시도 할 수 있습니다. 

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

참조 : https://www.w3schools.com/icons/fontawesome_icons_webapp.asp 

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

참조 : https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

따라서 색상과 크기를 완전히 제어 할 수 있습니다.

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

여기에 이미지 설명 입력

( 적용된 버튼의 스타일은 빠른 테스트를위한 것입니다 ) :

— 이고르 파라
소스
1

기본 부트 스트랩 탐색 모음 아이콘

<span class="navbar-toggler-icon"></span>

글꼴 굉장 아이콘 추가 및 제거 class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

— Md. Rana
소스
0

맞춤형 햄버거 탐색에 가장 적합한 솔루션을 확인하십시오.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>
스 니펫 확장

데모 이미지

— 하비 불라 칸
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.