부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

programing

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

javajsp 2023. 8. 27. 08:56

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

저는 화면 크기가 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>

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

그navbar-toggler-icon의 ( 부의랩 4햄는 (햄버거) SVG 사니다를 background-image토글러 아이콘 이미지에는 두 가지 "버전"이 있습니다.하나는 가벼운 나비바, 하나는 어두운 나비바...

사용하다navbar-dark어두운 배경에 밝은/흰색 토글러용
사용하다navbar-light 배경의 /러글밝회용▁for토러은▁a글▁on.

// 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, 다른 라이브러리의 아이콘만 사용할 수 있는 또 다른 옵션:폰트 어썸 등..

부트스트랩 4.0.0 업데이트:

4, 부스트랩 4 준으로기베,navbar-inverse은 금은입니다.navbar-dark더 밝은 링크 및 토글러 색상을 생성하기 위해 더 어두운 배경 색상을 가진 탐색 모음에서 사용합니다.

부트스트랩 4 Navbar 색상 변경 방법

글꼴 모양 아이콘을 탐색 모음의 기본 아이콘으로 사용합니다.

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

부스트한다경으로 합니다.bootstrap-4.4.1-dist/css/bootstrap.min.css

를 보다.navbar-light .navbar-toggler-icon 는또..navbar-dark .navbar-toggler-icon

를 합니다.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");
}

스니펫을 복사하여 사용자 정의 CSS에 붙여넣습니다.
stroke='rgba(0, 0, 0, 0.5)' 값("rgba")

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

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

도움이 되길 바랍니다!!

당신은 매우 쉬운 방법으로만 CSS로 토글러 버튼을 만들 수 있습니다. SVG나...에서 글꼴을 사용할 필요가 없습니다.포름의

사용자의 단추:

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

class 래만삽입만 합니다.navbar-dark또는navbar-light 요소nav 파일:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

이: 예, 코서에이범삭제시오십하위를드▁yes▁this.bars라고 이 멋진 을 붙여주세요.이 아이콘에 클래스를 추가한 다음 원하는 색상을 지정합니다.

그런 다음 두 번째 단계는 너비가 다음보다 큰 장치에서 이 아이콘을 숨기는 것입니다.992px에 이@media당신의 CSS 코드:

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* the class you gave of the bars icon ↑ */
    .iconClass{
        display: none;
    }
    /* the bootstrap toogler button class */
    .navbar-toggler{
        display: none;
    }
}

그것은 저에게도 효과가 있었고 저는 그것이 매우 쉽다는 것을 알았습니다.

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

추가 및 class="navbar-toggler-icon"

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

이 문제를 해결하는 가장 간단한 방법은 예를 들어 글꼴을 사용하는 것입니다.

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

그러면 변경할 수 있습니다.i하는 것과 입니다.i요소

또는 다음과 같은 다른 아이콘을 사용하여 언제든지 간단한 해결 방법을 시도할 수 있습니다.

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

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

편집: 내 잘못! 내 대답으로는 아이콘이 토글러로 작동하지 않습니다. 실제로 접히지 않은 상태에서도 표시됩니다.검색 중...

이렇게 하면 됩니다.

<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 tricky"를 사용하므로 사용자가 글꼴에 의존할 필요가 없습니다.

그러니, 그냥 사용하지 마세요."navbar-toggler"아이콘 글꼴을 사용하려면 단추의 클래스를 선택합니다.

건배.

저는 훨씬 더 쉬운 해결책을 개발했습니다.(예, 이것이 오래된 질문이라는 것을 알고 있지만, 동일한 문제를 연구하는 누군가는 이것이 유용하다고 생각할 수 있습니다.)

저는 hamburger.svg라는 SVG를 사용하고 있었습니다.저는 텍스트 편집기로 그것을 살펴보았지만 세 줄의 색상을 설정하는 것을 찾을 수 없었습니다. - 기본적으로 검은색으로 설정되어 있는 것 같습니다. 왜냐하면 그것이 확실히 제가 받는 동작이기 때문입니다. 그래서 저는 SVG의 정의에 단순히 "스트로크" 매개 변수를 추가했습니다.그것은 제대로 작동하지 않았습니다. 세 줄의 테두리는 제가 선택한 색상(흰색)이었지만 나머지 줄은 여전히 검은색이었기 때문에 "채우기" 매개 변수도 추가했습니다.그리고 그것이 속임수를 썼습니다!

원본 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를 전혀 조작하지 않고 다른 아이콘을 추적할 필요도 없습니다.

진정해요!당신은 이것을 모방해서 당신의 햄버거를 당신이 좋아하는 색깔로 만들 수 있습니다.

에서 sas 버전의 부트스트랩으로 작업하면 토글 단추의 색상과 스타일을 변경할 수 있는 위치를 찾을 수 있습니다.

html에서는 사용하거나 사용할 버전에 따라 사용해야 합니다.

SCSS에서 변경 시도:$navbar-dark-color: #abcdef; /* <-- here's your color */또는$navbar-light-color: #abcdef;빛을 사용하는 경우.

맞춤형 햄버거 내비게이션에 가장 적합한 솔루션을 확인하십시오.

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

데모 이미지

이 필터를 사용할 수 있습니다. 반전(100%) 세피아(0%) 포화도(0%) 색조(0%) 밝기(100%) 대비(100%);

언급URL : https://stackoverflow.com/questions/42586729/how-can-i-change-the-bootstrap-4-navbar-button-icon-color

'programing' 카테고리의 다른 글

구성 관리자를 사용하여 응용 프로그램을 다시 시작하지 않고 구성을 다시 로드합니다.섹션 새로 고침 (0)	2023.08.27
AJAX의 비동기적 특성을 추상화하기 위한 유창한 Javascript 인터페이스 설계 (0)	2023.08.27
데이터를 지우지 않고 양식을 기본값으로 설정 (0)	2023.08.27
C#: 문자열의 첫 문자를 얻는 방법은 무엇입니까? (0)	2023.08.27
packets.go:123: 잘못된 유휴 연결 닫기: 피어에 의해 연결 재설정 (0)	2023.08.27

현재글부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

jquery, ASP.NET, C, sql-server, Ajax, WordPress, MySQL, mongoDB, angularjs, Powershell, MariaDB, Python, CSS, reactjs, Git, JSON, Excel, Spring-Boot, oracle, bash,

Today :
Yesterday :

javajsp

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

부트스트랩 4 navbar 버튼 아이콘 색상을 변경하려면 어떻게 해야 합니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바